/* HYUNWOO OX PLAYER V19 LOCK
   This file is intentionally loaded after app.css.
   It is the execution-time source of truth for exam/topic/review OX dock geometry.
   V19 is the single source of truth for OX dock/feedback/bottom-tabbar geometry. */
:root {
  --hy-v7-ox-bottom: calc(18px + env(safe-area-inset-bottom));
  --hy-v7-ox-width: min(640px, calc(100vw - 28px));
  --hy-v7-ox-radius: 22px;
  --hy-v7-ox-dock-z: 52000;
  --hy-v7-ox-feedback-z: 53000;
  --hy-v7-ox-tabbar-z: 56000;
  --hy-v7-ox-btn-h: 56px;
  --hy-v7-ox-result-pad: 104px;
}

/* Reserve bottom space for every non-daily OX player. */
body.exam-tab-active #examPracticeBox,
body.dedicated-ox-player .topic-panel:not(.hidden),
body.dedicated-ox-player .review-panel:not(.hidden),
body.feature-page-active .topic-panel:not(.hidden),
body.feature-page-active .review-panel:not(.hidden) {
  padding-bottom: calc(var(--hy-v7-ox-btn-h) + 64px) !important;
}

/* One answer dock rule: evaluation / topic / review share the same viewport-fixed keyboard position. */
body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
body.dedicated-ox-player .topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.dedicated-ox-player .review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.feature-page-active .topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.feature-page-active .review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--hy-v7-ox-bottom) !important;
  width: var(--hy-v7-ox-width) !important;
  max-width: 640px !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-dock-z) !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 8px !important;
  border-radius: var(--hy-v7-ox-radius) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
}

body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid,
body.dedicated-ox-player .topic-panel > .learning-player-dock.floating-answer-dock .answer-grid,
body.dedicated-ox-player .review-panel > .learning-player-dock.floating-answer-dock .answer-grid,
body.feature-page-active .topic-panel > .learning-player-dock.floating-answer-dock .answer-grid,
body.feature-page-active .review-panel > .learning-player-dock.floating-answer-dock .answer-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn,
body.dedicated-ox-player .topic-panel > .learning-player-dock.floating-answer-dock .answer-btn,
body.dedicated-ox-player .review-panel > .learning-player-dock.floating-answer-dock .answer-btn,
body.feature-page-active .topic-panel > .learning-player-dock.floating-answer-dock .answer-btn,
body.feature-page-active .review-panel > .learning-player-dock.floating-answer-dock .answer-btn {
  min-height: var(--hy-v7-ox-btn-h) !important;
  height: var(--hy-v7-ox-btn-h) !important;
  border-radius: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* When a feedback dock exists, the O/X answer dock must not compete with it. */
body.exam-tab-active #examPracticeBox.exam-has-feedback > .exam-choice-area.exam-fixed-answer-dock,
body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock.hidden,
body.dedicated-ox-player .topic-panel.learning-has-feedback > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.dedicated-ox-player .review-panel.learning-has-feedback > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.feature-page-active .topic-panel.learning-has-feedback > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
body.feature-page-active .review-panel.learning-has-feedback > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* One feedback dock rule: 정답/오답 message follows the same bottom-bar position. */
body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-correct,
body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-wrong,
body.ox-player-active .topic-panel > .learning-player-dock.feedback-correct,
body.ox-player-active .topic-panel > .learning-player-dock.feedback-wrong,
body.ox-player-active .review-panel > .learning-player-dock.feedback-correct,
body.ox-player-active .review-panel > .learning-player-dock.feedback-wrong {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--hy-v7-ox-bottom) !important;
  width: var(--hy-v7-ox-width) !important;
  max-width: 640px !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-feedback-z) !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(160px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: var(--hy-v7-ox-radius) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
}

body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-correct .exam-next-btn,
body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-wrong .exam-next-btn,
body.ox-player-active .topic-panel > .learning-player-dock.feedback-correct .exam-next-btn,
body.ox-player-active .topic-panel > .learning-player-dock.feedback-wrong .exam-next-btn,
body.ox-player-active .review-panel > .learning-player-dock.feedback-correct .exam-next-btn,
body.ox-player-active .review-panel > .learning-player-dock.feedback-wrong .exam-next-btn {
  min-height: var(--hy-v7-ox-btn-h) !important;
  height: var(--hy-v7-ox-btn-h) !important;
  margin: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #examPracticeBox > .learning-player-dock.feedback-correct,
body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #examPracticeBox > .learning-player-dock.feedback-wrong,
body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active .topic-panel > .learning-player-dock.feedback-correct,
body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active .topic-panel > .learning-player-dock.feedback-wrong,
body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active .review-panel > .learning-player-dock.feedback-correct,
body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active .review-panel > .learning-player-dock.feedback-wrong {
  transform: translate3d(-50%, calc(100% + 30px), 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* OX screens: regular bottom tabbar stays hidden, but both legacy and v5 peek classes reveal it. */
body.ox-player-active .bottom-tabbar {
  display: grid !important;
  transform: translateX(-50%) translateY(calc(100% + 30px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ox-player-active.ox-tabbar-peek .bottom-tabbar,
body.ox-player-active.hy-ox-tabbar-peek .bottom-tabbar,
body.ox-player-active.hy-v6-tabbar-peek .bottom-tabbar,
body.ox-player-active.hy-v7-tabbar-peek .bottom-tabbar {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: var(--hy-v7-ox-tabbar-z) !important;
}

/* The gray question/explanation box is the scroll surface. */
body.exam-tab-active .exam-question-box.exam-chat-window,
body.feature-page-active .topic-panel .exam-question-box.exam-chat-window,
body.feature-page-active .review-panel .exam-question-box.exam-chat-window,
body.dedicated-ox-player .topic-panel .exam-question-box.exam-chat-window,
body.dedicated-ox-player .review-panel .exam-question-box.exam-chat-window {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

body.exam-tab-active .exam-result-area,
body.feature-page-active .topic-panel .learning-result-area,
body.feature-page-active .review-panel .learning-result-area,
body.dedicated-ox-player .topic-panel .learning-result-area,
body.dedicated-ox-player .review-panel .learning-result-area {
  padding-bottom: var(--hy-v7-ox-result-pad) !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Desktop must not switch the OX dock back to absolute; keep the mobile/keyboard metaphor. */
@media (min-width: 901px) {
  body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  body.dedicated-ox-player .topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  body.dedicated-ox-player .review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  body.feature-page-active .topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  body.feature-page-active .review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-correct,
  body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-wrong,
  body.ox-player-active .topic-panel > .learning-player-dock.feedback-correct,
  body.ox-player-active .topic-panel > .learning-player-dock.feedback-wrong,
  body.ox-player-active .review-panel > .learning-player-dock.feedback-correct,
  body.ox-player-active .review-panel > .learning-player-dock.feedback-wrong {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--hy-v7-ox-bottom) !important;
    transform: translate3d(-50%, 0, 0) !important;
    z-index: var(--hy-v7-ox-dock-z) !important;
  }

  body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-correct,
  body.ox-player-active #examPracticeBox > .learning-player-dock.feedback-wrong,
  body.ox-player-active .topic-panel > .learning-player-dock.feedback-correct,
  body.ox-player-active .topic-panel > .learning-player-dock.feedback-wrong,
  body.ox-player-active .review-panel > .learning-player-dock.feedback-correct,
  body.ox-player-active .review-panel > .learning-player-dock.feedback-wrong {
    z-index: var(--hy-v7-ox-feedback-z) !important;
  }
}


/* HYUNWOO OX PLAYER V14 VISUAL + SCROLL LAYER
   Moved from app.css so all OX player geometry and scroll rules live here. */

/* V14 extracted from app.css: ox card/result parity visuals */
/* HYUNWOO OX PLAYER PARITY V2: OX stays on the card; feedback floats near the bottom bar. */    /* HYUNWOO OX PLAYER PARITY V2: OX stays on the card; feedback floats near the bottom bar. */
    body.exam-tab-active .exam-player-card.exam-chat-card,
    body.feature-page-active .topic-panel .exam-player-card.exam-chat-card,
    body.feature-page-active .review-panel .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .topic-panel .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-chat-card {
      border-radius: 28px !important;
      border: 1px solid rgba(226,232,240,.95) !important;
      background: rgba(255,255,255,.98) !important;
      box-shadow: 0 16px 42px rgba(15,23,42,.08) !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-question-box.exam-chat-window,
    body.feature-page-active .topic-panel .exam-question-box.exam-chat-window,
    body.feature-page-active .review-panel .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .topic-panel .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .review-panel .exam-question-box.exam-chat-window {
      border-radius: 24px !important;
      border: 1px solid rgba(226,232,240,.95) !important;
      background: #f8fafc !important;
      min-height: 172px !important;
      padding: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-question,
    body.feature-page-active .topic-panel .exam-question,
    body.feature-page-active .review-panel .exam-question,
    body.dedicated-ox-player .topic-panel .exam-question,
    body.dedicated-ox-player .review-panel .exam-question {
      font-size: clamp(22px, 3.2vw, 30px) !important;
      line-height: 1.45 !important;
      letter-spacing: -0.035em !important;
    }

    body.exam-tab-active .exam-result-area,
    body.feature-page-active .topic-panel .learning-result-area,
    body.feature-page-active .review-panel .learning-result-area,
    body.dedicated-ox-player .topic-panel .learning-result-area,
    body.dedicated-ox-player .review-panel .learning-result-area {
      max-height: min(48vh, 440px) !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain !important;
      padding: 14px 4px 96px !important;
    }

    body.exam-tab-active .exam-feedback,
    body.feature-page-active .topic-panel .feedback,
    body.feature-page-active .review-panel .feedback,
    body.dedicated-ox-player .topic-panel .feedback,
    body.dedicated-ox-player .review-panel .feedback {
      overflow: visible !important;
      max-height: none !important;
      min-height: 0 !important;
    }

    body.exam-tab-active .exam-explanation,
    body.feature-page-active .topic-panel .explanation,
    body.feature-page-active .review-panel .explanation,
    body.dedicated-ox-player .topic-panel .explanation,
    body.dedicated-ox-player .review-panel .explanation {
      overflow: visible !important;
      max-height: none !important;
      min-height: 0 !important;
    }

    body.exam-tab-active .multi-result-list,
    body.feature-page-active .topic-panel .multi-result-list,
    body.feature-page-active .review-panel .multi-result-list,
    body.dedicated-ox-player .topic-panel .multi-result-list,
    body.dedicated-ox-player .review-panel .multi-result-list {
      overflow: visible !important;
      max-height: none !important;
      display: grid !important;
      gap: 8px !important;
    }

    body.exam-tab-active .multi-parent-summary,
    body.feature-page-active .topic-panel .multi-parent-summary,
    body.feature-page-active .review-panel .multi-parent-summary,
    body.dedicated-ox-player .topic-panel .multi-parent-summary,
    body.dedicated-ox-player .review-panel .multi-parent-summary,
    body.exam-tab-active .multi-target-box,
    body.feature-page-active .topic-panel .multi-target-box,
    body.feature-page-active .review-panel .multi-target-box,
    body.dedicated-ox-player .topic-panel .multi-target-box,
    body.dedicated-ox-player .review-panel .multi-target-box {
      max-height: none !important;
      overflow: visible !important;
      overflow-y: visible !important;
      min-height: 0 !important;
    }

    body.exam-tab-active .exam-multi-control-area,
    body.feature-page-active .topic-panel .exam-multi-control-area,
    body.feature-page-active .review-panel .exam-multi-control-area,
    body.dedicated-ox-player .topic-panel .exam-multi-control-area,
    body.dedicated-ox-player .review-panel .exam-multi-control-area {
      margin-bottom: 104px !important;
      position: relative !important;
      z-index: 24 !important;
    }

    body.exam-tab-active .multi-bottom-actions,
    body.feature-page-active .topic-panel .multi-bottom-actions,
    body.feature-page-active .review-panel .multi-bottom-actions,
    body.dedicated-ox-player .topic-panel .multi-bottom-actions,
    body.dedicated-ox-player .review-panel .multi-bottom-actions {
      position: relative !important;
      z-index: 25 !important;
    }

    /* HYUNWOO V7: feedback dock geometry/auto-hide moved to ox-player.css. */


/* V14 extracted from app.css: ox question scroll final lock */
/* HYUNWOO FINAL QUESTION SCROLL LOCK 2: last-write lock. */
    body.exam-tab-active .exam-question-box.exam-chat-window,
    body.feature-page-active .topic-panel .exam-question-box.exam-chat-window,
    body.feature-page-active .review-panel .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .topic-panel .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .review-panel .exam-question-box.exam-chat-window {
      justify-content: flex-start !important;
      align-items: stretch !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain !important;
    }

    body.exam-tab-active .multi-parent-summary,
    body.feature-page-active .topic-panel .multi-parent-summary,
    body.feature-page-active .review-panel .multi-parent-summary,
    body.dedicated-ox-player .topic-panel .multi-parent-summary,
    body.dedicated-ox-player .review-panel .multi-parent-summary,
    body.exam-tab-active .multi-target-box,
    body.feature-page-active .topic-panel .multi-target-box,
    body.feature-page-active .review-panel .multi-target-box,
    body.dedicated-ox-player .topic-panel .multi-target-box,
    body.dedicated-ox-player .review-panel .multi-target-box {
      align-self: stretch !important;
      flex: 0 0 auto !important;
      max-height: none !important;
      overflow: visible !important;
      overflow-y: visible !important;
      transform: none !important;
      margin-top: 10px !important;
      margin-bottom: 0 !important;
    }
    /* HYUNWOO V7: consolidated OX final layer lives in ox-player.css. */

    /* HYUNWOO V6: OX dock/feedback/bottom-tabbar regression lock moved to ox-player.css. */


/* HYUNWOO V19: viewport-fixed dock containment hotfix.
   The app-level .practice-panel rise animation leaves a computed transform on the
   OX panel. A transformed ancestor makes position:fixed descendants resolve
   against that ancestor instead of the viewport on WebKit/Chromium. During OX
   players, kill transform/animation/paint containment on only the OX containers. */
html body.exam-tab-active #appRoot #examPracticeBox,
html body.exam-tab-active #appRoot #examPracticeBox.practice-panel,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel,
html body.feature-page-active #appRoot #topicPanel.topic-panel,
html body.feature-page-active #appRoot #reviewPanel.review-panel {
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
  filter: none !important;
  perspective: none !important;
  contain: initial !important;
}

/* HYUNWOO V19: stronger final dock selectors.
   These intentionally out-specificy legacy app.css answer-dock rules and keep
   the answer/feedback docks pinned to the visual viewport across desktop,
   iPhone Safari, Android Chrome, and iPad-class layouts. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
  position: fixed !important;
  inset: auto auto var(--hy-v7-ox-bottom) 50% !important;
  width: min(640px, calc(100dvw - 28px)) !important;
  max-width: 640px !important;
  min-width: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-dock-z) !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  position: fixed !important;
  inset: auto auto var(--hy-v7-ox-bottom) 50% !important;
  width: min(640px, calc(100dvw - 28px)) !important;
  max-width: 640px !important;
  min-width: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-feedback-z) !important;
}

html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  transform: translate3d(-50%, calc(100% + 30px), 0) !important;
}

/* HYUNWOO OX PLAYER V21 VISUAL TUNE
   - Restore visible 최신 평가원 더보기 affordance.
   - Normalize exam/topic/review gray question-box height on mobile/tablet.
   - Slightly reduce statement typography.
   - Make O/X buttons more vertically solid. */
:root {
  --hy-v7-ox-btn-h: 66px;
  --hy-v7-ox-result-pad: 118px;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 58px !important;
  width: 100% !important;
  padding: 8px 4px 6px !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 51000 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-head {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-title {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-subtitle {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 36px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1),
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2),
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  z-index: 120000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  width: auto !important;
  min-width: 68px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary::-webkit-details-marker {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  width: min(360px, calc(100dvw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 96px)) !important;
  overflow-y: auto !important;
  z-index: 120001 !important;
  border-radius: 20px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox #examResetInlineBtnStage,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-actions #examResetInlineBtnStage {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
  height: clamp(500px, calc(100dvh - 224px), 660px) !important;
  min-height: 500px !important;
  max-height: calc(100dvh - 170px) !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-window {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 22px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question,
html body.feature-page-active #appRoot #topicPanel.topic-panel .question,
html body.feature-page-active #appRoot #reviewPanel.review-panel .question,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .question,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .question {
  font-size: clamp(20px, 5vw, 27px) !important;
  line-height: 1.48 !important;
  letter-spacing: -0.028em !important;
  word-break: keep-all !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .question-label,
html body.feature-page-active #appRoot #topicPanel.topic-panel .question-label,
html body.feature-page-active #appRoot #reviewPanel.review-panel .question-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
  padding: 9px !important;
  border-radius: 24px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock .answer-btn,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock .answer-btn,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock .answer-btn,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock .answer-btn {
  min-height: 66px !important;
  height: 66px !important;
  border-radius: 19px !important;
  font-size: clamp(32px, 9vw, 46px) !important;
  font-weight: 1000 !important;
}

@media (min-width: 901px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1),
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2),
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) {
    display: block !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-title {
    font-size: 17px !important;
  }
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
    min-height: 48px !important;
    padding: 2px 4px 6px !important;
    margin-bottom: 6px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-head {
    display: none !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    flex: 1 1 auto !important;
    justify-content: space-between !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
    flex: 0 1 auto !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
    height: clamp(500px, calc(100dvh - 184px), 660px) !important;
    min-height: 500px !important;
  }
}

/* HYUNWOO V21.1: avoid clamp+dvh height ambiguity in Chromium/WebKit.
   Keep the OX card in the same visual band across exam/topic/review. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
  height: calc(100dvh - 184px) !important;
  min-height: 500px !important;
  max-height: 660px !important;
}

@media (min-width: 901px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
    height: calc(100dvh - 240px) !important;
    min-height: 500px !important;
    max-height: 660px !important;
  }
}

/* HYUNWOO OX PLAYER V21 RESTORE
   - Restore the redesign-style exam status strip instead of the empty compact header.
   - Use ellipsis (…) affordance for the more menu.
   - Keep V20 OX proportions: smaller statement text, thicker O/X buttons, fixed bottom dock. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
  display: block !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 51000 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-head {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  width: 100% !important;
  min-height: 88px !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(92px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1),
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2),
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(3),
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
  height: 56px !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.94) !important;
  background: rgba(248, 250, 252, 0.82) !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1) span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2) span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(3) span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) span {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1) strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2) strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(3) strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) strong {
  display: block !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: radial-gradient(circle at 34% 26%, #334155 0, #172033 52%, #0f172a 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge-text {
  display: block !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 120000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.08em !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  width: min(360px, calc(100dvw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 96px)) !important;
  overflow-y: auto !important;
  z-index: 120001 !important;
  border-radius: 20px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
  height: calc(100dvh - 286px) !important;
  min-height: 430px !important;
  max-height: 640px !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
    min-height: auto !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    grid-template-columns: minmax(0, 1fr) 58px 38px !important;
    gap: 8px !important;
    min-height: 96px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(1),
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(2),
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(3),
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item:nth-child(4) {
    height: 43px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong {
    font-size: 13px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge {
    width: 58px !important;
    height: 58px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge-text {
    font-size: 12px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
    font-size: 22px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
    height: calc(100dvh - 286px) !important;
    min-height: 430px !important;
    max-height: 600px !important;
  }
}

@media (min-width: 901px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
    margin-bottom: 18px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
  html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
    height: calc(100dvh - 328px) !important;
    min-height: 430px !important;
    max-height: 620px !important;
  }
}

/* HYUNWOO OX PLAYER V23 STREAK ORB
   - Swap exam progress/streak: progress becomes a status box, streak becomes the round orb.
   - Restore ink-smoke streak effect behind the streak orb only.
   - No sparkle/ring/fade; smoke stays behind content and moves subtly. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item.exam-progress-status {
  display: flex !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  --smoke-a: 139, 92, 246;
  --smoke-b: 59, 130, 246;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .18;
  --smoke-blur: 14px;
  --smoke-scale: 1;
  --smoke-extra: 0px;
  --smoke-wobble: 1;
  background: radial-gradient(circle at 34% 26%, #334155 0, #172033 52%, #0f172a 100%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, .18) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  opacity: .86 !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong {
  display: block !important;
  font-size: 20px !important;
  line-height: .95 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-smoke {
  position: absolute !important;
  inset: calc(-10px - var(--smoke-extra)) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: var(--smoke-opacity) !important;
  filter: blur(var(--smoke-blur)) saturate(1.15) !important;
  transform-origin: 50% 50% !important;
  border-radius: 42% 58% 49% 51% !important;
  background:
    radial-gradient(circle at 18% 35%, rgba(var(--smoke-a), .62), transparent 34%),
    radial-gradient(circle at 72% 25%, rgba(var(--smoke-b), .48), transparent 32%),
    radial-gradient(circle at 56% 78%, rgba(var(--smoke-c), .42), transparent 38%),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .25), transparent 26%) !important;
  animation: inkSmokeDrift calc(9s / var(--smoke-wobble)) linear infinite !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-smoke.secondary {
  inset: calc(-14px - var(--smoke-extra)) !important;
  opacity: calc(var(--smoke-opacity) * .72) !important;
  filter: blur(calc(var(--smoke-blur) + 5px)) saturate(1.22) !important;
  background:
    radial-gradient(circle at 68% 38%, rgba(var(--smoke-c), .52), transparent 36%),
    radial-gradient(circle at 30% 24%, rgba(var(--smoke-b), .38), transparent 34%),
    radial-gradient(circle at 44% 82%, rgba(var(--smoke-a), .36), transparent 42%) !important;
  animation:
    inkSmokeDriftReverse calc(13s / var(--smoke-wobble)) linear infinite,
    inkSmokeWaver calc(5.8s / var(--smoke-wobble)) ease-in-out infinite !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-5 {
  --smoke-a: 167, 139, 250;
  --smoke-b: 196, 181, 253;
  --smoke-c: 129, 140, 248;
  --smoke-opacity: .12;
  --smoke-scale: .96;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-10 {
  --smoke-a: 139, 92, 246;
  --smoke-b: 96, 165, 250;
  --smoke-c: 165, 180, 252;
  --smoke-opacity: .14;
  --smoke-scale: .98;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-15 {
  --smoke-a: 59, 130, 246;
  --smoke-b: 45, 212, 191;
  --smoke-c: 125, 211, 252;
  --smoke-opacity: .16;
  --smoke-scale: 1;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-20 {
  --smoke-a: 45, 212, 191;
  --smoke-b: 52, 211, 153;
  --smoke-c: 34, 197, 94;
  --smoke-opacity: .18;
  --smoke-scale: 1.03;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-25 {
  --smoke-a: 52, 211, 153;
  --smoke-b: 132, 204, 22;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .20;
  --smoke-scale: 1.06;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-30 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 74, 222, 128;
  --smoke-c: 250, 204, 21;
  --smoke-opacity: .22;
  --smoke-scale: 1.09;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-35 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 250, 204, 21;
  --smoke-c: 56, 189, 248;
  --smoke-opacity: .24;
  --smoke-scale: 1.12;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-40 {
  --smoke-a: 125, 211, 252;
  --smoke-b: 251, 207, 232;
  --smoke-c: 196, 181, 253;
  --smoke-opacity: .27;
  --smoke-scale: 1.15;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-40 .exam-status-smoke {
  background:
    radial-gradient(circle at 16% 35%, rgba(125, 211, 252, .55), transparent 34%),
    radial-gradient(circle at 38% 24%, rgba(167, 243, 208, .50), transparent 32%),
    radial-gradient(circle at 64% 30%, rgba(251, 207, 232, .54), transparent 36%),
    radial-gradient(circle at 78% 72%, rgba(196, 181, 253, .52), transparent 38%),
    radial-gradient(circle at 34% 78%, rgba(254, 240, 138, .34), transparent 30%) !important;
}

@keyframes inkSmokeDrift {
  0% { transform: rotate(0deg) scale(calc(var(--smoke-scale) + 0.00)) translate3d(-1px, 0, 0); }
  33% { transform: rotate(118deg) scale(calc(var(--smoke-scale) + .025)) translate3d(2px, -1px, 0); }
  66% { transform: rotate(241deg) scale(calc(var(--smoke-scale) + .04)) translate3d(-1px, 2px, 0); }
  100% { transform: rotate(360deg) scale(calc(var(--smoke-scale) + 0.00)) translate3d(-1px, 0, 0); }
}

@keyframes inkSmokeDriftReverse {
  0% { transform: rotate(360deg) scale(calc(var(--smoke-scale) + .03)) translate3d(1px, 1px, 0); }
  50% { transform: rotate(180deg) scale(calc(var(--smoke-scale) + .06)) translate3d(-2px, 1px, 0); }
  100% { transform: rotate(0deg) scale(calc(var(--smoke-scale) + .03)) translate3d(1px, 1px, 0); }
}

@keyframes inkSmokeWaver {
  0%, 100% { border-radius: 42% 58% 49% 51%; }
  35% { border-radius: 58% 42% 61% 39%; }
  70% { border-radius: 45% 55% 36% 64%; }
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    grid-template-columns: minmax(0, 1fr) 62px 38px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb {
    width: 62px !important;
    height: 62px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label {
    font-size: 9px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong {
    font-size: 20px !important;
  }
}

/* HYUNWOO OX PLAYER V23.1: force streak orb to stay circular.
   Legacy .exam-streak-status min-width rules were making the circle oval. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 !important;
  flex: 0 0 72px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    grid-template-columns: minmax(0, 1fr) 62px 38px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    flex-basis: 62px !important;
  }
}

/* HYUNWOO V23: streak text smoke + stronger OX answer feedback.
   Text smoke stays behind the text; no sparkle, no ring, no opacity blinking. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
  position: relative !important;
  z-index: 2 !important;
  color: #0f172a !important;
  font-weight: 850 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px -10px !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 20% 40%, rgba(var(--smoke-a), .34), transparent 38%),
    radial-gradient(circle at 75% 55%, rgba(var(--smoke-b), .28), transparent 42%) !important;
  animation: textSmokeWaver 8s linear infinite !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-5 .streak-text { color: #5b5f7a !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-10 .streak-text { color: #4f46e5 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-15 .streak-text { color: #2563eb !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-20 .streak-text { color: #0f766e !important; font-weight: 900 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-25 .streak-text { color: #15803d !important; font-weight: 920 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-30 .streak-text { color: #166534 !important; font-weight: 930 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-35 .streak-text { color: #0f766e !important; font-weight: 940 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-40 .streak-text {
  color: transparent !important;
  font-weight: 950 !important;
  background: linear-gradient(105deg, #7dd3fc, #a7f3d0, #fbcfe8, #c4b5fd, #fde68a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: none !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-20 .streak-text::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-25 .streak-text::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-30 .streak-text::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-35 .streak-text::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb.streak-40 .streak-text::before {
  opacity: .55 !important;
}

@keyframes textSmokeWaver {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

html body #appRoot .exam-player-card.correct-flash,
html body #appRoot .quiz-card.correct-flash {
  animation: correctCardFlash .42s ease-out !important;
}

html body #appRoot .exam-player-card.wrong-flash,
html body #appRoot .quiz-card.wrong-flash {
  animation: wrongCardFlash .36s ease-out !important;
}

html body #appRoot .answer-btn.correct-selected,
html body #appRoot .answer-btn.correct-choice,
html body #appRoot .answer-btn.correct-answer {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #14532d !important;
}

html body #appRoot .answer-btn.correct-selected {
  animation: correctPop .34s cubic-bezier(.16, 1.2, .3, 1) !important;
}

html body #appRoot .answer-btn.wrong-selected,
html body #appRoot .answer-btn.wrong-choice {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #7f1d1d !important;
  animation: wrongShake .32s ease-in-out !important;
}

html body #appRoot .feedback.show.correct,
html body #appRoot .exam-feedback.show.correct {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #14532d !important;
}

html body #appRoot .feedback.show.wrong,
html body #appRoot .exam-feedback.show.wrong {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #7f1d1d !important;
}

@keyframes correctPop {
  0% { transform: scale(.96); }
  55% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes correctCardFlash {
  0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
  45% {
    box-shadow:
      0 0 0 5px rgba(34, 197, 94, .12),
      0 18px 40px rgba(34, 197, 94, .14);
  }
  100% { box-shadow: 0 12px 30px rgba(15, 23, 42, .06); }
}

@keyframes wrongCardFlash {
  0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  45% {
    box-shadow:
      0 0 0 5px rgba(239, 68, 68, .12),
      0 18px 40px rgba(239, 68, 68, .13);
  }
  100% { box-shadow: 0 12px 30px rgba(15, 23, 42, .06); }
}

/* HYUNWOO OX PLAYER V24
   - Restore the older light streak orb visual in the exam status strip.
   - Keep the "연속" label inside the orb and keep V23 streak-text effects.
   - Fix the iPhone exam more-menu ratio as a viewport sheet instead of a squeezed dropdown. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  flex: 0 0 86px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, .95) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 250, 252, .98) 0 48%, rgba(240, 253, 250, .90) 61%, rgba(224, 242, 254, .58) 73%, rgba(255, 255, 255, .96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -12px 26px rgba(148, 163, 184, .08),
    0 18px 38px rgba(15, 23, 42, .08) !important;
  color: #0f172a !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb::after {
  content: "" !important;
  position: absolute !important;
  inset: 13px !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: rgba(248, 250, 252, .94) !important;
  box-shadow:
    0 0 0 1px rgba(226, 232, 240, .82),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-smoke {
  z-index: 0 !important;
  opacity: calc(var(--smoke-opacity, .18) * 1.12) !important;
  filter: blur(calc(var(--smoke-blur, 14px) + 3px)) saturate(1.08) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-smoke.secondary {
  z-index: 0 !important;
  opacity: calc(var(--smoke-opacity, .18) * .82) !important;
  filter: blur(calc(var(--smoke-blur, 14px) + 7px)) saturate(1.14) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-orb-label {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 0 3px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: rgba(71, 85, 105, .88) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
  position: relative !important;
  z-index: 3 !important;
  font-size: 30px !important;
  line-height: .94 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  text-shadow: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  grid-template-columns: minmax(0, 1fr) 86px 42px !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    grid-template-columns: minmax(0, 1fr) 72px 38px !important;
    gap: 8px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    flex-basis: 72px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb::after {
    inset: 11px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-orb-label {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
    font-size: 25px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open]::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 120000 !important;
    pointer-events: none !important;
    background: rgba(15, 23, 42, .055) !important;
    backdrop-filter: blur(2px) !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(94px, calc(env(safe-area-inset-top) + 76px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 122px - env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: 24px !important;
    display: grid !important;
    gap: 12px !important;
    overflow-y: auto !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 28px 78px rgba(15, 23, 42, .22) !important;
    transform: none !important;
    translate: none !important;
    z-index: 120002 !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    color: #0f172a !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel label {
    min-width: 0 !important;
    display: grid !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    color: #64748b !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel select,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel .exam-control-btn {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-actions .exam-control-btn,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-actions .exam-control-btn:last-child {
    grid-column: auto !important;
    white-space: nowrap !important;
  }
}

/* HYUNWOO V24.1 legacy pseudo-backdrop. V31.72 keeps this obsolete layer disabled
   and uses a real modal backdrop element instead. */
@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open]::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

/* HYUNWOO V26 OX ALIGNMENT POLISH
   Alignment-only correction pass for exam/topic/review OX UI. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  align-items: center !important;
  gap: 12px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
  align-items: stretch !important;
  gap: 10px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 50px !important;
  gap: 5px !important;
  line-height: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong {
  display: block !important;
  line-height: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
  line-height: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong {
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label {
  transform: translateY(1px) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong {
  transform: translateY(-1px) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 0 3px !important;
  text-align: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel label {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel label > span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-title {
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel select,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-check,
html body.exam-tab-active #appRoot #examPracticeBox .exam-control-btn {
  min-height: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-check {
  justify-content: flex-start !important;
  gap: 9px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-check input {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card,
html body.feature-page-active #appRoot .topic-panel .exam-player-card,
html body.feature-page-active #appRoot .review-panel .exam-player-card,
html body.dedicated-ox-player #appRoot .topic-panel .exam-player-card,
html body.dedicated-ox-player #appRoot .review-panel .exam-player-card {
  display: flex !important;
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box,
html body #appRoot .topic-panel .learning-chat-window,
html body #appRoot .review-panel .learning-chat-window {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .question-label,
html body #appRoot .topic-panel .question-label,
html body #appRoot .review-panel .question-label {
  display: block !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question,
html body #appRoot .topic-panel .exam-question,
html body #appRoot .review-panel .exam-question,
html body #appRoot .topic-panel .question,
html body #appRoot .review-panel .question {
  margin: 0 !important;
  line-height: 1.42 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-fixed-answer-dock,
html body #appRoot .topic-panel .floating-answer-dock,
html body #appRoot .review-panel .floating-answer-dock,
html body #appRoot .learning-player-dock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .answer-grid,
html body #appRoot .topic-panel .answer-grid,
html body #appRoot .review-panel .answer-grid,
html body #appRoot .exam-answer-grid {
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .answer-btn,
html body #appRoot .topic-panel .answer-btn,
html body #appRoot .review-panel .answer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  text-align: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .feedback.show,
html body.exam-tab-active #appRoot #examPracticeBox .exam-feedback.show,
html body #appRoot .feedback.show,
html body #appRoot .exam-feedback.show {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  line-height: 1.15 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-feedback-title,
html body #appRoot .exam-feedback-title {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.15 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-next-btn,
html body #appRoot .exam-next-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    grid-template-columns: minmax(0, 1fr) 72px 38px !important;
    align-items: center !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
    min-height: 48px !important;
    padding: 9px 10px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    min-width: 0 !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .feedback.show,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-feedback.show,
  html body #appRoot .feedback.show,
  html body #appRoot .exam-feedback.show {
    min-height: 64px !important;
  }
}

/* HYUNWOO V26.1 FEEDBACK ROW ALIGNMENT
   Fixes inner feedback cards collapsing into a narrow vertical block in mobile dock captures. */
html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .feedback.show,
html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .exam-feedback.show,
html body #appRoot .learning-player-dock > .feedback.show,
html body #appRoot .learning-player-dock > .exam-feedback.show {
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 20px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  text-align: left !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .feedback.show .exam-feedback-title,
html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .exam-feedback.show .exam-feedback-title,
html body #appRoot .learning-player-dock > .feedback.show .exam-feedback-title,
html body #appRoot .learning-player-dock > .exam-feedback.show .exam-feedback-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .feedback.show .exam-next-btn,
html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .exam-feedback.show .exam-next-btn,
html body #appRoot .learning-player-dock > .feedback.show .exam-next-btn,
html body #appRoot .learning-player-dock > .exam-feedback.show .exam-next-btn {
  width: auto !important;
  min-width: 96px !important;
  max-width: 128px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 390px) {
  html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .feedback.show,
  html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .exam-feedback.show,
  html body #appRoot .learning-player-dock > .feedback.show,
  html body #appRoot .learning-player-dock > .exam-feedback.show {
    padding: 11px 12px !important;
    gap: 10px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .feedback.show .exam-next-btn,
  html body.exam-tab-active #appRoot #examPracticeBox .learning-player-dock > .exam-feedback.show .exam-next-btn,
  html body #appRoot .learning-player-dock > .feedback.show .exam-next-btn,
  html body #appRoot .learning-player-dock > .exam-feedback.show .exam-next-btn {
    min-width: 92px !important;
    padding: 0 14px !important;
  }
}


/* HYUNWOO V26.2 FEEDBACK OUTER DOCK OVERRIDE
   Earlier feedback dock rules turn the outer dock into a grid; stretch the inner feedback row explicitly. */
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct > .feedback.show,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong > .exam-feedback.show,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct > .exam-feedback.show,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong > .feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct > .feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong > .exam-feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct > .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong > .exam-feedback.show {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

/* HYUNWOO V27 POLISH
   - Hide routine save toast while OX correct/wrong feedback is active.
   - Make the exam more-menu read as a solid sheet on iPhone.
   - No state/cycle/Supabase behavior changes. */
html body.ox-feedback-active #toast.show,
html body.ox-feedback-active #appRoot + #toast.show,
html body.ox-player-active.ox-feedback-active .toast.show {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 18px, 0) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, .96) !important;
  box-shadow:
    0 28px 78px rgba(15, 23, 42, .24),
    0 1px 0 rgba(255, 255, 255, .96) inset !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    background: rgba(255, 255, 255, .995) !important;
    border-color: rgba(203, 213, 225, .98) !important;
    box-shadow:
      0 28px 76px rgba(15, 23, 42, .25),
      0 0 0 1px rgba(255, 255, 255, .82) inset !important;
    backdrop-filter: blur(22px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.05) !important;
  }
}

/* HYUNWOO V29 OX POLISH
   - Bottom tabbar hides with motion instead of snapping.
   - OX feedback dock reads left/right instead of collapsing toward center.
   - Evaluation answer/explanation card scrolls as one box again.
   - Bookmark/report actions move into the compact question header on the right. */
html body.ox-player-active #appRoot .bottom-tabbar,
html body.ox-player-active.ox-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-ox-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v6-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v7-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar {
  transition:
    transform .34s cubic-bezier(.16, 1, .3, 1),
    opacity .24s ease,
    box-shadow .24s ease !important;
  will-change: transform, opacity !important;
}

html body.ox-player-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: var(--hy-v7-ox-tabbar-z) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-head .question-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support {
  flex: 0 0 auto !important;
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-support {
  display: inline-flex !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn {
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(203, 213, 225, .88) !important;
  color: #334155 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-result-actions {
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card {
  max-height: min(620px, calc(100vh - 230px)) !important;
  min-height: min(520px, calc(100vh - 260px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window {
  flex: 0 0 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question {
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.42 !important;
  text-align: left !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area .exam-feedback.show {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  text-align: left !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area .exam-feedback.show.correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area .feedback.show.correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area .feedback.show.correct {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #14532d !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area .exam-feedback.show.wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area .feedback.show.wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area .feedback.show.wrong {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #7f1d1d !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-feedback-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .multi-result-list,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-explanation {
  text-align: left !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-explanation-title {
  margin: 12px 0 8px !important;
  text-align: left !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-explanation {
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.62 !important;
  color: #334155 !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  padding: 10px 12px !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-dock-message {
  min-width: 0 !important;
  justify-self: start !important;
  text-align: left !important;
  padding-left: 8px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-next-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-next-btn {
  width: auto !important;
  min-width: 110px !important;
  max-width: 136px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  justify-self: end !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-question-head {
    gap: 8px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support {
    gap: 4px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card {
    max-height: calc(100vh - 205px) !important;
    min-height: calc(100vh - 300px) !important;
  }
  html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-dock-message,
  html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-dock-message,
  html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-dock-message {
    font-size: 15px !important;
    padding-left: 4px !important;
  }
  html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-next-btn,
  html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-next-btn,
  html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-next-btn {
    min-width: 104px !important;
    max-width: 124px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
  }
}

/* HYUNWOO V29.1: protect the compact question header from legacy padding-right rules. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-head .question-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-head .question-label {
  padding-right: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
  overflow: visible !important;
}

/* HYUNWOO V29.2: keep the OX card frame stable before and after answer feedback. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered {
  height: calc(100dvh - 286px) !important;
  min-height: 430px !important;
  max-height: 640px !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered {
    height: calc(100dvh - 286px) !important;
    min-height: 430px !important;
    max-height: 600px !important;
  }
}

@media (min-width: 901px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered {
    height: calc(100dvh - 328px) !important;
    min-height: 430px !important;
    max-height: 620px !important;
  }
}

/* HYUNWOO V29.3: share the answered OX card layout with topic/review players. */
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-head,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-head .question-label,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-head .question-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-support,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-support {
  flex: 0 0 auto !important;
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-support,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-support,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-support,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-support {
  display: inline-flex !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-support .tiny-btn {
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(203, 213, 225, .88) !important;
  color: #334155 !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.exam-answered {
  height: calc(100dvh - 286px) !important;
  min-height: 430px !important;
  max-height: 640px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
  flex: 0 0 auto !important;
  min-height: 112px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question {
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.42 !important;
  text-align: left !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area .feedback.show {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  text-align: left !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: visible !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .feedback-title,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .feedback-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .multi-result-list,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .explanation,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .multi-result-list,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .explanation {
  max-height: none !important;
  overflow: visible !important;
  text-align: left !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .explanation-title,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .explanation-title {
  margin: 12px 0 8px !important;
  text-align: left !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .support-actions,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .support-actions,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .learning-result-area > .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .learning-result-area > .exam-next-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .learning-result-area .feedback.show > .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .learning-result-area .feedback.show > .exam-next-btn {
  display: none !important;
}

@media (max-width: 760px) {
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-head,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-head {
    gap: 8px !important;
  }

  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-support,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-support {
    gap: 4px !important;
  }

  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-support .tiny-btn,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-support .tiny-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.exam-answered,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.exam-answered {
    height: calc(100dvh - 286px) !important;
    min-height: 430px !important;
    max-height: 600px !important;
  }
}

@media (min-width: 901px) {
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.exam-answered,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.exam-answered {
    height: calc(100dvh - 328px) !important;
    min-height: 430px !important;
    max-height: 620px !important;
  }
}


/* HYUNWOO V30 OX PEEK GUARD
   The runtime now reveals the bottom tabbar only after a tap candidate survives movement checks.
   Keep the animation smooth and do not let scroll/touchmove instantly reveal it. */
html body.ox-player-active #appRoot .bottom-tabbar {
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .28s ease !important;
}

/* HYUNWOO V30.1 EXAM MENU / SUPPORT LAYER FIX
   - 더보기 sheet가 상단 앱 배너/평가원 상태바에 가리지 않게 최상위 fixed sheet로 고정.
   - 닫힌 평가원 상태바가 북마크/오류 제보 클릭 레이어를 덮지 않게 z-index/pointer layer 분리. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
  z-index: 40 !important;
  pointer-events: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu *,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel * {
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-head,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn {
  position: relative !important;
  z-index: 80 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] {
  z-index: 130000 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
  z-index: 130002 !important;
}

/* HYUNWOO V29.5: raise the exam more-menu parent stack only while the sheet is open. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header:has(.exam-kebab-menu[open]) {
  position: relative !important;
  z-index: 180000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header:has(.exam-kebab-menu[open]) .exam-status-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header:has(.exam-kebab-menu[open]) .exam-player-head {
  position: relative !important;
  z-index: 180001 !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] {
  position: relative !important;
  z-index: 180002 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open]::before {
  z-index: 180001 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] .exam-kebab-panel {
  z-index: 180003 !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(132px, calc(env(safe-area-inset-top) + 118px)) !important;
    width: auto !important;
    max-height: calc(100dvh - 164px - env(safe-area-inset-bottom)) !important;
    z-index: 180003 !important;
  }
}

/* HYUNWOO V29.6: pre-overhaul streak smoke layer, clipped behind exam status content. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  --smoke-a: 139, 92, 246;
  --smoke-b: 59, 130, 246;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .18;
  --smoke-blur: 14px;
  --smoke-scale: 1;
  --smoke-extra: 0px;
  --smoke-wobble: 1;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 255, 255, .99) 0 42%, rgba(var(--smoke-a), .13) 58%, rgba(var(--smoke-b), .12) 74%, rgba(var(--smoke-c), .08) 86%, rgba(255, 255, 255, .96) 100%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb::after {
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .94) 0 38%, rgba(255, 255, 255, .68) 55%, rgba(255, 255, 255, 0) 76%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status > span:not(.exam-status-smoke),
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status > strong {
  position: relative !important;
  z-index: 2 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-smoke {
  position: absolute !important;
  inset: calc(-12px - var(--smoke-extra)) calc(-10px - var(--smoke-extra)) calc(-8px - var(--smoke-extra)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: var(--smoke-opacity) !important;
  filter: blur(var(--smoke-blur)) saturate(1.15) !important;
  transform-origin: 50% 50% !important;
  translate: 0 -8px !important;
  background:
    radial-gradient(circle at 18% 35%, rgba(var(--smoke-a), .62), transparent 34%),
    radial-gradient(circle at 72% 25%, rgba(var(--smoke-b), .48), transparent 32%),
    radial-gradient(circle at 56% 78%, rgba(var(--smoke-c), .42), transparent 38%),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .25), transparent 26%) !important;
  animation: inkSmokeDrift calc(9s / var(--smoke-wobble)) linear infinite !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-smoke.secondary {
  inset: calc(-16px - var(--smoke-extra)) calc(-14px - var(--smoke-extra)) calc(-10px - var(--smoke-extra)) !important;
  opacity: calc(var(--smoke-opacity) * .72) !important;
  filter: blur(calc(var(--smoke-blur) + 5px)) saturate(1.22) !important;
  translate: 0 -10px !important;
  background:
    radial-gradient(circle at 68% 38%, rgba(var(--smoke-c), .52), transparent 36%),
    radial-gradient(circle at 30% 24%, rgba(var(--smoke-b), .38), transparent 34%),
    radial-gradient(circle at 44% 82%, rgba(var(--smoke-a), .36), transparent 42%) !important;
  animation:
    inkSmokeDriftReverse calc(13s / var(--smoke-wobble)) linear infinite,
    inkSmokeWaver calc(5.8s / var(--smoke-wobble)) ease-in-out infinite !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-5 {
  --smoke-a: 20, 184, 166;
  --smoke-b: 45, 212, 191;
  --smoke-c: 153, 246, 228;
  --smoke-opacity: .12;
  --smoke-scale: .96;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-10 {
  --smoke-a: 59, 130, 246;
  --smoke-b: 96, 165, 250;
  --smoke-c: 191, 219, 254;
  --smoke-opacity: .14;
  --smoke-scale: .98;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-15 {
  --smoke-a: 37, 99, 235;
  --smoke-b: 59, 130, 246;
  --smoke-c: 139, 92, 246;
  --smoke-opacity: .16;
  --smoke-scale: 1;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-20 {
  --smoke-a: 236, 72, 153;
  --smoke-b: 244, 114, 182;
  --smoke-c: 251, 113, 133;
  --smoke-opacity: .20;
  --smoke-scale: 1.03;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-25 {
  --smoke-a: 245, 158, 11;
  --smoke-b: 217, 119, 6;
  --smoke-c: 251, 191, 36;
  --smoke-opacity: .22;
  --smoke-scale: 1.06;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-30 {
  --smoke-a: 16, 185, 129;
  --smoke-b: 5, 150, 105;
  --smoke-c: 250, 204, 21;
  --smoke-opacity: .24;
  --smoke-scale: 1.09;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-35 {
  --smoke-a: 217, 70, 239;
  --smoke-b: 219, 39, 119;
  --smoke-c: 232, 121, 249;
  --smoke-opacity: .26;
  --smoke-scale: 1.12;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-40 {
  --smoke-a: 125, 211, 252;
  --smoke-b: 251, 207, 232;
  --smoke-c: 196, 181, 253;
  --smoke-opacity: .27;
  --smoke-scale: 1.15;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-40 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 20% 52%, rgba(94, 234, 212, .42), transparent 36%),
    radial-gradient(ellipse at 42% 22%, rgba(167, 139, 250, .38), transparent 34%),
    radial-gradient(ellipse at 60% 50%, rgba(244, 114, 182, .42), transparent 38%),
    radial-gradient(ellipse at 82% 28%, rgba(240, 171, 252, .36), transparent 34%),
    radial-gradient(ellipse at 70% 78%, rgba(187, 247, 208, .36), transparent 36%),
    radial-gradient(ellipse at 34% 80%, rgba(254, 240, 138, .28), transparent 32%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-30 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 20% 42%, rgba(16, 185, 129, .44), transparent 36%),
    radial-gradient(ellipse at 70% 28%, rgba(5, 150, 105, .38), transparent 34%),
    radial-gradient(ellipse at 54% 76%, rgba(52, 211, 153, .36), transparent 38%),
    radial-gradient(ellipse at 22% 24%, rgba(250, 204, 21, .28), transparent 24%),
    radial-gradient(ellipse at 78% 66%, rgba(253, 224, 71, .24), transparent 24%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-35 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 18% 42%, rgba(217, 70, 239, .46), transparent 36%),
    radial-gradient(ellipse at 72% 28%, rgba(219, 39, 119, .38), transparent 34%),
    radial-gradient(ellipse at 54% 78%, rgba(232, 121, 249, .36), transparent 38%),
    radial-gradient(ellipse at 38% 20%, rgba(240, 171, 252, .28), transparent 30%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-5 .streak-text { color: #14b8a6 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-10 .streak-text { color: #3b82f6 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-15 .streak-text { color: #2563eb !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-20 .streak-text { color: #ec4899 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-25 .streak-text { color: #f59e0b !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-30 .streak-text { color: #10b981 !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-35 .streak-text { color: #d946ef !important; }
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-40 .streak-text { color: #8b5cf6 !important; }

/* HYUNWOO V30.3 EXAM STREAK SMOKE CENTERING
   평가원 연속 orb의 smoke가 아래쪽으로 깔려 보이는 문제 보정.
   smoke layer를 원 중앙보다 살짝 위로 재배치하고, 하단 중심 gradient를 줄인다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .99) 0 40%, rgba(var(--smoke-a), .10) 55%, rgba(var(--smoke-b), .10) 71%, rgba(var(--smoke-c), .07) 84%, rgba(255, 255, 255, .97) 100%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb::after {
  inset: 12px !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .94) 0 36%, rgba(255, 255, 255, .70) 58%, rgba(255, 255, 255, 0) 78%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status .exam-status-smoke {
  inset: calc(-20px - var(--smoke-extra)) !important;
  z-index: 0 !important;
  translate: 0 -16px !important;
  opacity: calc(var(--smoke-opacity, .18) * .92) !important;
  filter: blur(calc(var(--smoke-blur, 14px) + 2px)) saturate(1.12) !important;
  background:
    radial-gradient(ellipse at 22% 42%, rgba(var(--smoke-a), .50), transparent 34%),
    radial-gradient(ellipse at 74% 36%, rgba(var(--smoke-b), .42), transparent 34%),
    radial-gradient(ellipse at 54% 58%, rgba(var(--smoke-c), .36), transparent 38%),
    radial-gradient(ellipse at 36% 56%, rgba(255, 255, 255, .22), transparent 28%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status .exam-status-smoke.secondary {
  inset: calc(-24px - var(--smoke-extra)) !important;
  z-index: 0 !important;
  translate: 0 -18px !important;
  opacity: calc(var(--smoke-opacity, .18) * .62) !important;
  filter: blur(calc(var(--smoke-blur, 14px) + 7px)) saturate(1.16) !important;
  background:
    radial-gradient(ellipse at 66% 44%, rgba(var(--smoke-c), .44), transparent 36%),
    radial-gradient(ellipse at 32% 34%, rgba(var(--smoke-b), .32), transparent 34%),
    radial-gradient(ellipse at 48% 62%, rgba(var(--smoke-a), .30), transparent 42%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-30 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 22% 40%, rgba(16, 185, 129, .40), transparent 36%),
    radial-gradient(ellipse at 70% 34%, rgba(5, 150, 105, .34), transparent 34%),
    radial-gradient(ellipse at 54% 58%, rgba(52, 211, 153, .32), transparent 38%),
    radial-gradient(ellipse at 28% 30%, rgba(250, 204, 21, .22), transparent 26%),
    radial-gradient(ellipse at 74% 56%, rgba(253, 224, 71, .18), transparent 26%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-35 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 22% 40%, rgba(217, 70, 239, .42), transparent 36%),
    radial-gradient(ellipse at 72% 34%, rgba(219, 39, 119, .34), transparent 34%),
    radial-gradient(ellipse at 54% 58%, rgba(232, 121, 249, .32), transparent 38%),
    radial-gradient(ellipse at 40% 30%, rgba(240, 171, 252, .22), transparent 30%) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.streak-40 .exam-status-smoke {
  background:
    radial-gradient(ellipse at 22% 42%, rgba(94, 234, 212, .36), transparent 36%),
    radial-gradient(ellipse at 42% 32%, rgba(167, 139, 250, .32), transparent 34%),
    radial-gradient(ellipse at 60% 48%, rgba(244, 114, 182, .34), transparent 38%),
    radial-gradient(ellipse at 80% 34%, rgba(240, 171, 252, .30), transparent 34%),
    radial-gradient(ellipse at 68% 62%, rgba(187, 247, 208, .28), transparent 36%),
    radial-gradient(ellipse at 36% 60%, rgba(254, 240, 138, .20), transparent 32%) !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb::after {
    inset: 10px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status .exam-status-smoke {
    inset: calc(-18px - var(--smoke-extra)) !important;
    translate: 0 -13px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status .exam-status-smoke.secondary {
    inset: calc(-22px - var(--smoke-extra)) !important;
    translate: 0 -15px !important;
  }
}

/* HYUNWOO V30.4 ANSWERED QUESTION COMPACT
   O/X 선택 후 좌측 상단 축소 선지 박스를 더 작게 만들어 해설 공간을 확보한다.
   평가원/주제별/복습 공통. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-head,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-head,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-head,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-head,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-head,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-head {
  margin: 0 0 7px !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
  flex: 0 0 auto !important;
  min-height: 72px !important;
  max-height: 112px !important;
  padding: 11px 13px !important;
  border-radius: 17px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .question-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .question-label,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .question-label,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .question-label,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .question-label,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .question-label {
  margin: 0 0 5px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  color: #64748b !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window .exam-question,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .question,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .question {
  font-size: clamp(13px, 2.8vw, 16px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
  margin: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-support .tiny-btn,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .multi-parent-summary,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .multi-parent-summary,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .multi-parent-summary,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .multi-parent-summary,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .multi-parent-summary,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .multi-parent-summary {
  margin-top: 5px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  gap: 4px !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .multi-target-box,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .multi-target-box,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .multi-target-box,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .multi-target-box,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .multi-target-box,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .multi-target-box {
  margin-top: 5px !important;
  padding: 7px 9px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area {
  padding-top: 9px !important;
}

@media (min-width: 901px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
    min-height: 76px !important;
    max-height: 124px !important;
    padding: 12px 15px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window .exam-question,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question {
    font-size: clamp(14px, 1.2vw, 17px) !important;
  }
}

@media (max-width: 390px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
    min-height: 66px !important;
    max-height: 100px !important;
    padding: 10px 11px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-answered .exam-question-box.exam-chat-window .exam-question,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question {
    font-size: 12.5px !important;
    line-height: 1.28 !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-support .tiny-btn,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-support .tiny-btn,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-support .tiny-btn {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 6px !important;
    font-size: 9.5px !important;
  }
}

/* HYUNWOO V30.2 OX viewport lock
   Keep the page itself fixed; only the OX question/result surface may scroll. */
html:has(body.ox-player-active),
html:has(body.exam-tab-active) {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body.ox-player-active,
html body.exam-tab-active {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body.ox-player-active #appRoot,
html body.exam-tab-active #appRoot {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel,
html body.ox-player-active #appRoot #reviewPanel.review-panel {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.exam-answered {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}


/* HYUNWOO V31 USER FIXES
   - 평가원 상단 상태바를 더 위/작게 정리하고 문항 박스 공간을 확보.
   - 태블릿 포함 OX 외부 스크롤을 잠그고, 내부 해설/문항 박스만 스크롤.
   - 복습 OX 카드 폭을 평가원/주제별과 동일 체급으로 맞춤.
   - 불필요한 설명 문구는 숨김. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
  margin-top: -8px !important;
  margin-bottom: 4px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  min-height: 70px !important;
  padding: 8px 10px !important;
  border-radius: 22px !important;
  grid-template-columns: minmax(0, 1fr) 74px 38px !important;
  gap: 8px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
  gap: 7px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
  min-height: 0 !important;
  height: 42px !important;
  padding: 6px 8px !important;
  border-radius: 13px !important;
  gap: 3px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span {
  font-size: 8.5px !important;
  margin-bottom: 2px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong {
  font-size: 12.5px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  flex-basis: 74px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
  font-size: 25px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card {
  margin-top: -2px !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox:not(.exam-has-feedback) .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.exam-answered) .exam-question-box.exam-chat-window {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window {
  flex: 0 0 clamp(116px, 18%, 160px) !important;
  min-height: 116px !important;
  max-height: 160px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 14px 14px !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    min-height: 78px !important;
    padding: 8px !important;
    grid-template-columns: minmax(0, 1fr) 66px 36px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
    height: 38px !important;
    padding: 5px 7px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    flex-basis: 66px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
    font-size: 23px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card {
    margin-top: -2px !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox:not(.exam-has-feedback) .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.exam-answered) .exam-question-box.exam-chat-window {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window {
    flex: 0 0 clamp(122px, 20%, 172px) !important;
    min-height: 122px !important;
    max-height: 172px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body.exam-tab-active #appRoot,
  html body.ox-player-active #appRoot {
    overflow: hidden !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox,
  html body.ox-player-active #appRoot #topicPanel.topic-panel,
  html body.ox-player-active #appRoot #reviewPanel.review-panel {
    overflow: hidden !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 260px) !important;
    max-height: none !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

html body.ox-player-active #appRoot #reviewPanel.review-panel,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card {
  width: 100% !important;
  max-width: 100% !important;
}

html body.ox-player-active #appRoot .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #appRoot .feature-command-copy,
html body #appRoot .settings-head p,
html body #appRoot .settings-row div > span,
html body #appRoot .section-label > span:empty,
html body #appRoot .quick-launch-sub:empty {
  display: none !important;
}

/* HYUNWOO V31.11 OX PLAYER V31.2 RESTORE
   V31.3 EXAM SPACE FILL removed. That block forced the exam tab into a
   viewport-calc flex shell and reintroduced broken card/question scrolling.
   The OX player must keep the V31.2-style surface: status row + one player
   card, with exactly one scroll surface on the card, never inside the
   question text box. */
/* HYUNWOO V31.4 OX HIERARCHY PASS
   UI-only: compress non-essential result/status chrome, give explanation the main
   reading space, and replace support text buttons with compact symmetric icons. */
:root {
  --hy-v31-ox-safe-gap: 8px;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
  min-height: 74px !important;
  padding: 9px 10px !important;
  grid-template-columns: minmax(0, 1fr) 64px 36px !important;
  gap: 8px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-grid {
  gap: 7px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
  min-height: 40px !important;
  height: 40px !important;
  padding: 6px 8px !important;
  border-radius: 13px !important;
  gap: 3px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item span {
  font-size: 8.5px !important;
  margin-bottom: 1px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item strong {
  font-size: 12.5px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  flex-basis: 64px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb::after {
  inset: 10px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-label,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-orb-label {
  font-size: 8.5px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
  font-size: 23px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu,
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  font-size: 20px !important;
  padding-bottom: 2px !important;
}

/* Support actions: real inline SVG icons, no nth-child CSS drawing.
   Bookmark/report must stay stable even if button order/text changes. */
html body.ox-player-active #appRoot .exam-question-support .tiny-btn,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn {
  position: relative !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #64748b !important;
  background: rgba(255,255,255,.92) !important;
}
html body.ox-player-active #appRoot .exam-question-support .tiny-btn::before,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn::after,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn::after {
  display: none !important;
  content: none !important;
}
html body.ox-player-active #appRoot .exam-question-support .tiny-btn svg,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}
html body.ox-player-active #appRoot .exam-question-support .tiny-btn:hover,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn:focus-visible,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn:hover,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn:focus-visible {
  color: #0f172a !important;
  background: rgba(241,245,249,.96) !important;
}
html body.ox-player-active #appRoot .exam-question-support .tiny-btn span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Result card stops dominating. Explanation becomes the main surface. */
html body.ox-player-active #appRoot .exam-result-area,
html body.exam-tab-active #appRoot #examPracticeBox .exam-result-area {
  padding-top: 8px !important;
}
html body.ox-player-active #appRoot .feedback.show,
html body.exam-tab-active #appRoot #examPracticeBox .exam-feedback.show {
  border-radius: 20px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area .exam-feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area .feedback.show {
  padding: 12px 14px 16px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-feedback-title,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .feedback-title,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .feedback-title {
  min-height: 28px !important;
  margin: 0 0 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .multi-result-list,
html body.ox-player-active #appRoot #topicPanel.topic-panel .multi-result-list,
html body.ox-player-active #appRoot #reviewPanel.review-panel .multi-result-list {
  gap: 6px !important;
  margin: 0 0 8px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .multi-target-box,
html body.ox-player-active #appRoot #topicPanel.topic-panel .multi-target-box,
html body.ox-player-active #appRoot #reviewPanel.review-panel .multi-target-box {
  padding: 9px 11px !important;
  border-radius: 15px !important;
  min-height: 50px !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-explanation-title,
html body.ox-player-active #appRoot .explanation-title {
  margin: 6px 0 6px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
}
html body.exam-tab-active #appRoot #examPracticeBox .exam-explanation,
html body.ox-player-active #appRoot .explanation {
  font-size: 15px !important;
  line-height: 1.66 !important;
}

/* Explanation toggle as a small disclosure, not a settings-sized switch. */
html body #appRoot .explanation-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  margin-top: 6px !important;
  padding: 0 !important;
}
html body #appRoot .explanation-toggle-label {
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
}
html body #appRoot .explanation-toggle {
  position: relative !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(203,213,225,.92) !important;
  box-shadow: none !important;
}
html body #appRoot .explanation-toggle::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 8px !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #334155 !important;
  border-bottom: 2px solid #334155 !important;
  transform: rotate(45deg) !important;
  transition: transform .18s ease !important;
}
html body #appRoot .explanation-toggle.active::before {
  top: 11px !important;
  transform: rotate(225deg) !important;
}

/* Feedback dock hierarchy: next button is primary, message is status. */
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-dock-message {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #475569 !important;
  opacity: .88 !important;
}
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock .exam-next-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock .exam-next-btn {
  min-width: 118px !important;
  max-width: 148px !important;
  height: 48px !important;
  min-height: 48px !important;
  font-weight: 950 !important;
}

/* More menu becomes a true mobile sheet. It no longer fights the top status bar. */
@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62dvh, 520px) !important;
    border-radius: 26px !important;
    padding: 16px !important;
    z-index: 180003 !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel label {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    min-height: 70px !important;
    grid-template-columns: minmax(0, 1fr) 58px 34px !important;
    padding: 8px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-item,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-progress-status {
    min-height: 36px !important;
    height: 36px !important;
    padding: 5px 7px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-badge.exam-streak-orb,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    flex-basis: 58px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .exam-status-badge-text,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb > strong,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-orb .streak-text {
    font-size: 21px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window {
    flex-basis: clamp(66px, 13%, 106px) !important;
    min-height: 66px !important;
    max-height: 106px !important;
    padding: 12px 14px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window .exam-question {
    font-size: clamp(14px, 3.35vw, 17px) !important;
    line-height: 1.36 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-status-card {
    min-height: 68px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window {
    flex-basis: clamp(76px, 12%, 124px) !important;
    min-height: 76px !important;
    max-height: 124px !important;
  }
}

/* HYUNWOO V31.10 OX SINGLE SCROLL SURFACE
   문항 텍스트 박스 안쪽에 별도 스크롤바가 생기는 회귀를 차단한다.
   스크롤은 exam-player-card / learning-chat-card 전체에만 둔다. */
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-window {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: clamp(170px, 30dvh, 280px) !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-window::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window {
  scrollbar-width: none !important;
}

html body.ox-player-active #appRoot #examPracticeBox .exam-result-area,
html body.exam-tab-active #appRoot #examPracticeBox .exam-result-area,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-result-area,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-result-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-result-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-result-area {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window {
    flex-basis: auto !important;
    min-height: clamp(120px, 22dvh, 190px) !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window {
    flex-basis: auto !important;
    min-height: clamp(132px, 20dvh, 220px) !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* HYUNWOO V31.12 OX TAB RESTORE LOCK
   OX 플레이어는 v31.2식 한 장짜리 카드 구조로 고정한다.
   - 홈 배너/상단 여백 제거는 유지
   - 문항 텍스트 박스 내부 스크롤 금지
   - 스크롤은 플레이어 카드 전체 하나만 허용
   - 북마크/오류 제보 아이콘은 inline SVG만 사용 */
html body.exam-tab-active {
  overflow-x: hidden !important;
}

html body.exam-tab-active #appRoot .exam-tab-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.exam-tab-active #appRoot .exam-tab-card > .card-inner {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.practice-panel,
html body.exam-tab-active #appRoot #examPracticeBox {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 104px - env(safe-area-inset-bottom)) !important;
  height: auto !important;
  gap: 10px !important;
  padding: 8px 0 calc(104px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card {
  flex: 1 1 auto !important;
  min-height: clamp(360px, 62dvh, 720px) !important;
  max-height: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-gutter: stable both-edges !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-window {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: clamp(230px, 42dvh, 390px) !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
  scrollbar-width: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window {
  flex-basis: auto !important;
  min-height: clamp(140px, 24dvh, 240px) !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-question-box.exam-chat-window::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-result-area,
html body.ox-player-active #appRoot #examPracticeBox .exam-result-area,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-result-area,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-result-area {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  z-index: 180020 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support,
html body.ox-player-active #appRoot .exam-question-support {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 76px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #64748b !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(226,232,240,.96) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn::before,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn::after,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn::before,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn::after {
  display: none !important;
  content: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn svg,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn[data-bookmark-saved="true"],
html body.ox-player-active #appRoot .exam-question-support .tiny-btn[data-bookmark-saved="true"] {
  color: #0f172a !important;
  background: rgba(241,245,249,.96) !important;
  border-color: rgba(203,213,225,.96) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn span,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox.practice-panel,
  html body.exam-tab-active #appRoot #examPracticeBox {
    min-height: calc(100dvh - 96px - env(safe-area-inset-bottom)) !important;
    padding-top: 6px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card {
    min-height: clamp(350px, 66dvh, 640px) !important;
    border-radius: 24px !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window {
    min-height: clamp(230px, 44dvh, 410px) !important;
  }
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window {
    min-height: clamp(132px, 24dvh, 230px) !important;
  }
}

/* HYUNWOO V31.13 UI REVIEW LOCK
   - 평가원 OX 답안 도크가 app.css의 left:50%/translateX(-50%) 잔재를 물려받아 왼쪽으로 밀리는 문제 차단
   - OX 플레이어가 아닌 평가원 빈 상태에서는 하단 탭바를 다시 접근 가능하게 복구
   - 시안 1 support icon 렌더링 선명도 보정 */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

html body.exam-tab-active:not(.ox-player-active):not(.player-active):not(.solving-active) #appRoot .bottom-tabbar {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 120000 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn svg,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  shape-rendering: geometricPrecision !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn .support-svg-report,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn .support-svg-report {
  width: 19px !important;
  height: 19px !important;
}

/* HYUNWOO V31.14 OX SUBMIT / DESKTOP DOCK LOCK
   - 북마크/오류제보 버튼은 제출·동기화 후에도 SVG 아이콘을 유지한다.
   - 데스크톱 OX 답안 도크는 모바일 full-width 규칙을 물려받지 않고 중앙 고정 폭으로 돌아간다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn {
  position: relative !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn > span,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .tiny-btn svg,
html body.ox-player-active #appRoot .exam-question-support .tiny-btn svg {
  flex: 0 0 auto !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 761px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
    left: 50% !important;
    right: auto !important;
    width: min(820px, calc(100vw - 48px)) !important;
    max-width: 820px !important;
    min-width: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }

  html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid {
    gap: 10px !important;
    margin: 0 !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn {
    height: 60px !important;
    min-height: 60px !important;
    border-radius: 18px !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}


/* HYUNWOO V31.15 OX SUBMIT + DESKTOP FINAL LOCK
   1) 북마크/오류제보는 상태 변경 후에도 텍스트가 다시 보이면 안 된다.
   2) 데스크톱 O/X 도크는 화면 밑에 작게 떠 있는 형태가 아니라 카드 폭에 맞춘 큰 조작부로 둔다.
   3) 제출 후 축소된 문항 박스와 해설 박스 사이의 과한 빈 공간을 없앤다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .support-icon-btn,
html body.ox-player-active #appRoot .exam-question-support .support-icon-btn {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  color: #64748b !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .support-icon-btn > span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .support-icon-btn .support-icon-label,
html body.ox-player-active #appRoot .exam-question-support .support-icon-btn > span,
html body.ox-player-active #appRoot .exam-question-support .support-icon-btn .support-icon-label {
  position: absolute !important;
  inset: auto !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .support-icon-btn svg,
html body.ox-player-active #appRoot .exam-question-support .support-icon-btn svg {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  shape-rendering: geometricPrecision !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: visible !important;
  overflow-y: visible !important;
  gap: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window .exam-question {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(14px, 3.2vw, 17px) !important;
  line-height: 1.36 !important;
  margin: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-result-area,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-result-area {
  padding-top: 8px !important;
  margin-top: 0 !important;
}

@media (min-width: 761px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
    left: 50% !important;
    right: auto !important;
    width: min(1040px, calc(100vw - 240px)) !important;
    max-width: 1040px !important;
    min-width: 720px !important;
    transform: translate3d(-50%, 0, 0) !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    padding: 10px !important;
    border-radius: 26px !important;
  }

  html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid {
    gap: 12px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn {
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 20px !important;
    font-size: 42px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window {
    padding: 12px 16px !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window .exam-question,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window .exam-question {
    font-size: clamp(14px, 1.2vw, 17px) !important;
  }
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
  html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
    padding: 11px 13px !important;
  }
}

/* HYUNWOO V31.15.1 SUPPORT ICON SIZE OVERRIDE
   Feedback-state legacy pill rules are more specific than the generic icon lock.
   Keep support buttons as 34px icon buttons after submit too. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-support .tiny-btn.support-icon-btn,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-support .tiny-btn.support-icon-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-support .tiny-btn.support-icon-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-question-support .tiny-btn.support-icon-btn > span,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn > span,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-question-support .tiny-btn.support-icon-btn > span,
html body.ox-player-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn > span,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-question-support .tiny-btn.support-icon-btn > span,
html body.ox-player-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-answered .exam-question-support .tiny-btn.support-icon-btn > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  white-space: nowrap !important;
}


/* HYUNWOO V31.16 OX TOGGLE + SUPPORT ICON LOCK
   - 해설은 다시 명시적 토글 버튼으로 열고 닫는다.
   - 북마크/오류제보는 제출 전에도 클릭 가능한 실제 버튼 레이어로 둔다.
   - 오류제보는 점/느낌표 없는 순수 깃발 아이콘으로 중앙 정렬한다. */
html body #appRoot .explanation-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #0f172a !important;
}

html body #appRoot .explanation-toggle-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}

html body #appRoot .explanation-toggle {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 50px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203,213,225,.95) !important;
  background: rgba(226,232,240,.9) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06) !important;
  padding: 0 !important;
  cursor: pointer !important;
}

html body #appRoot .explanation-toggle::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.16) !important;
  transform: translateX(0) !important;
  transition: transform .16s ease !important;
}

html body #appRoot .explanation-toggle.active {
  background: rgba(15,23,42,.94) !important;
  border-color: rgba(15,23,42,.94) !important;
}

html body #appRoot .explanation-toggle.active::before {
  transform: translateX(20px) !important;
}

html body #appRoot .exam-question-support,
html body #appRoot .support-actions {
  pointer-events: auto !important;
  z-index: 60 !important;
}

html body #appRoot .exam-question-support .support-icon-btn,
html body #appRoot .support-actions .support-icon-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-content: center !important;
  align-content: center !important;
}

html body #appRoot .support-icon-btn .support-svg,
html body #appRoot .support-icon-btn svg {
  position: static !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  shape-rendering: geometricPrecision !important;
}

html body #appRoot .support-svg-report path:nth-child(n+3) {
  display: none !important;
}

/* HYUNWOO V31.17 TOGGLE KNOB CENTER LOCK
   - 이전 active::before 규칙의 top 값이 더 높은 specificity로 살아서 토글 원이 상하로 흔들리던 문제 고정.
   - 트랙 중앙 1축에서만 좌우 이동하도록 top 50% + translateY(-50%)로 잠근다. */
html body #appRoot .explanation-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

html body #appRoot .explanation-toggle::before,
html body #appRoot .explanation-toggle.active::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.16) !important;
  transition: transform .16s ease !important;
  will-change: transform !important;
}

html body #appRoot .explanation-toggle::before {
  transform: translate3d(0, -50%, 0) !important;
}

html body #appRoot .explanation-toggle.active::before {
  transform: translate3d(20px, -50%, 0) !important;
}

/* HYUNWOO V31.17.1 OX LAYER + FEEDBACK COLOR LOCK
   - 해설 토글 노브는 수직 중심을 고정하고 좌우로만 이동.
   - 오류제보/북마크는 OX 답안 도크보다 위 레이어로 올림.
   - 제출 후 하단 정답/오답 문구 색상을 복구. */
html body #appRoot .explanation-toggle {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

html body #appRoot .explanation-toggle::before,
html body #appRoot .explanation-toggle.active::before,
html body #appRoot .explanation-toggle[aria-pressed="true"]::before,
html body #appRoot .explanation-toggle[aria-pressed="false"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.16) !important;
  transition: transform .16s ease !important;
  will-change: transform !important;
}

html body #appRoot .explanation-toggle::before,
html body #appRoot .explanation-toggle[aria-pressed="false"]::before {
  transform: translate3d(0, -50%, 0) !important;
}

html body #appRoot .explanation-toggle.active::before,
html body #appRoot .explanation-toggle[aria-pressed="true"]::before {
  transform: translate3d(20px, -50%, 0) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-head,
html body.ox-player-active #appRoot .exam-question-head,
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support,
html body.ox-player-active #appRoot .exam-question-support,
html body.exam-tab-active #appRoot #examPracticeBox .support-actions,
html body.ox-player-active #appRoot .support-actions {
  position: relative !important;
  z-index: 180080 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-support .support-icon-btn,
html body.ox-player-active #appRoot .exam-question-support .support-icon-btn,
html body.exam-tab-active #appRoot #examPracticeBox .support-actions .support-icon-btn,
html body.ox-player-active #appRoot .support-actions .support-icon-btn {
  position: relative !important;
  z-index: 180081 !important;
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  pointer-events: auto !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message {
  color: var(--correct) !important;
  opacity: 1 !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message {
  color: var(--wrong) !important;
  opacity: 1 !important;
}

/* HYUNWOO V31.18 MODAL LAYER LOCK
   - 오류 제보/북마크 저장 모달은 O/X 도크와 support 버튼보다 항상 위에 있어야 한다.
   - 이전 v31.17에서 O/X 도크 z-index를 올리며 모달 입력창을 덮는 회귀가 생겼다.
   - 답안/피드백 도크는 모달이 열려도 화면 아래에 있을 수 있지만, 레이어는 모달 아래로 고정한다. */
html body #appRoot .report-sheet-overlay,
html body .report-sheet-overlay,
html body #appRoot .bookmark-save-dialog,
html body .bookmark-save-dialog {
  position: fixed !important;
  z-index: 240000 !important;
  isolation: isolate !important;
}

html body #appRoot .report-sheet,
html body .report-sheet,
html body #appRoot .bookmark-save-card,
html body .bookmark-save-card {
  position: relative !important;
  z-index: 240001 !important;
}

html body:has(.report-sheet-overlay:not(.hidden)) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body:has(.report-sheet-overlay:not(.hidden)) #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body:has(.report-sheet-overlay:not(.hidden)) #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body:has(.bookmark-save-dialog:not(.hidden)) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body:has(.bookmark-save-dialog:not(.hidden)) #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body:has(.bookmark-save-dialog:not(.hidden)) #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong {
  pointer-events: none !important;
}

/* HYUNWOO V31.20 EXPLANATION TOGGLE SIZE TUNE
   - 해설 토글 버튼만 소폭 축소.
   - 노브 수직 중앙 고정 유지, 클릭 시 좌우 이동만 허용. */
html body #appRoot .explanation-toggle-row {
  min-height: 30px !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

html body #appRoot .explanation-toggle {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-block !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

html body #appRoot .explanation-toggle::before,
html body #appRoot .explanation-toggle.active::before,
html body #appRoot .explanation-toggle[aria-pressed="true"]::before,
html body #appRoot .explanation-toggle[aria-pressed="false"]::before {
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;
  border-radius: 999px !important;
  transform: translate3d(0, -50%, 0) !important;
  transition: transform .16s ease !important;
  will-change: transform !important;
}

html body #appRoot .explanation-toggle.active::before,
html body #appRoot .explanation-toggle[aria-pressed="true"]::before {
  transform: translate3d(16px, -50%, 0) !important;
}


/* HYUNWOO V31.21 OX LAZY SCROLLBAR LOCK
   내용이 짧은 문항 카드에서 스크롤바/스크롤 트랙이 먼저 열려 보이는 회귀를 막는다.
   JS가 실제 scrollHeight > clientHeight일 때만 hy-ox-scroll-needed를 붙이고, 그때만 카드 전체 1스크롤을 허용한다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* HYUNWOO V31.22 DOCK / FEEDBACK / SETTINGS / PASSAGE CHIP TUNE
   - 평가원 OX 도크가 bottom-tabbar 상태에 따라 위로 뜨는 회귀를 막고, 주제별/복습 OX 위치 기준으로 통일.
   - 제출 후 하단 피드백 도크는 박스는 낮추고, 정답/오답 문구는 키우고, 다음 선지 버튼은 줄임.
   - 설정 패널의 보조 설명 문구 제거.
   - 제시문 사상가 chip 선택 상태를 하단바 active처럼 회색으로 명확히 표시. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  min-height: 58px !important;
  padding: 7px 8px !important;
  border-radius: 22px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

html body #appRoot .learning-player-dock.feedback-correct .exam-dock-message,
html body #appRoot .learning-player-dock.feedback-wrong .exam-dock-message {
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em !important;
}

html body #appRoot .learning-player-dock.feedback-correct .exam-next-btn.show,
html body #appRoot .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body #appRoot .learning-player-dock.feedback-correct .next-btn.show,
html body #appRoot .learning-player-dock.feedback-wrong .next-btn.show {
  min-width: 92px !important;
  width: auto !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #appRoot .settings-panel .settings-head p,
html body #appRoot .settings-panel .settings-row > div > span,
html body #appRoot .settings-panel .settings-row strong + span,
html body #appRoot .settings-panel .settings-row-icon {
  display: none !important;
}

html body #appRoot .settings-panel .settings-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
}

html body #appRoot .settings-panel .settings-row strong {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html body #appRoot [data-feature-panel="passage"] .passage-chip.active,
html body #appRoot [data-feature-panel="passage"] .passage-chip[aria-pressed="true"],
html body #appRoot [data-feature-panel="passage"] .passage-chip[aria-selected="true"] {
  color: #0f172a !important;
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 1px 2px rgba(15,23,42,.06) !important;
}

html body #appRoot [data-feature-panel="passage"] .passage-chip.active strong,
html body #appRoot [data-feature-panel="passage"] .passage-chip[aria-pressed="true"] strong,
html body #appRoot [data-feature-panel="passage"] .passage-chip[aria-selected="true"] strong {
  color: #334155 !important;
}

html body #appRoot [data-feature-panel="passage"] .passage-chip:active {
  transform: translateY(1px) !important;
  background: #e2e8f0 !important;
}

/* HYUNWOO V31.22.1 FEEDBACK DOCK SPECIFICITY LOCK
   오래된 #examPracticeBox + ox-player-active selector가 메시지/다음 버튼 크기를 다시 이기는 문제 보정. */
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message {
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 1000 !important;
  color: var(--correct) !important;
  opacity: 1 !important;
  padding-left: 4px !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message {
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 1000 !important;
  color: var(--wrong) !important;
  opacity: 1 !important;
  padding-left: 4px !important;
}

html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-next-btn.show,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-next-btn.show,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-next-btn.show {
  min-width: 92px !important;
  max-width: 108px !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
  html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
  html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
  html body.exam-tab-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
  html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
  html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
  html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message,
  html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message {
    font-size: 16px !important;
  }
}

/* HYUNWOO V31.23 SHORT OX CARD SCROLLBAR FALSE-POSITIVE FIX
   - 짧은 문항인데 이전 긴 문항의 스크롤 상태가 재활용 카드에 남는 회귀 방지.
   - 기본은 스크롤/스크롤바 완전 닫힘. JS가 실제 overflow를 판정해 hy-ox-scroll-needed가 붙을 때만 카드 전체 1스크롤 허용.
   - 문항 박스/결과 박스 내부 스크롤은 계속 금지. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card:not(.hy-ox-scroll-needed),
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card:not(.hy-ox-scroll-needed),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card:not(.hy-ox-scroll-needed),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card:not(.hy-ox-scroll-needed) {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #topicPanel.topic-panel .learning-chat-card.hy-ox-scroll-needed,
html body.feature-page-active #appRoot #reviewPanel.review-panel .learning-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel .learning-chat-card.hy-ox-scroll-needed,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel .learning-chat-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #appRoot .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-window,
html body #appRoot .exam-result-area,
html body #appRoot .exam-feedback,
html body #appRoot .exam-explanation {
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #appRoot .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body #appRoot .learning-chat-window::-webkit-scrollbar,
html body #appRoot .exam-result-area::-webkit-scrollbar,
html body #appRoot .exam-feedback::-webkit-scrollbar,
html body #appRoot .exam-explanation::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* HYUNWOO V31.24 REAL-CONTENT SCROLLBAR GUARD
   V31.21/23 used scrollHeight and could treat blank min-height as overflow.
   hy-ox-short-card is set by ox-runtime after measuring visible real content only. */
html body #appRoot .exam-player-card.exam-chat-card.hy-ox-short-card,
html body #appRoot .learning-chat-card.hy-ox-short-card {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-short-card::-webkit-scrollbar,
html body #appRoot .learning-chat-card.hy-ox-short-card::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body #appRoot .learning-chat-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}

/* HYUNWOO V31.25 OX SURFACE UNIFICATION
   - 평가원 / 주제별 / 오늘의 복습 OX 모두 중앙 회색 플레이어 면이 O/X 도크 바로 위까지 이어지게 고정.
   - 짧은 문항에서 빈 flex/min-height 때문에 스크롤바가 보이는 회귀 차단.
   - 스크롤이 필요해도 문항 박스 내부가 아니라 플레이어 카드 전체만 스크롤 표면으로 둔다. */
:root {
  --hy-ox-unified-dock-reserve: calc(var(--hy-v7-ox-btn-h, 56px) + 78px + env(safe-area-inset-bottom));
  --hy-ox-unified-panel-min: calc(100dvh - 118px - env(safe-area-inset-bottom));
  --hy-ox-unified-card-min: clamp(420px, calc(100dvh - 218px), 840px);
}

@media (min-width: 901px) {
  :root {
    --hy-ox-unified-dock-reserve: calc(var(--hy-v7-ox-btn-h, 56px) + 72px);
    --hy-ox-unified-panel-min: calc(100dvh - 104px);
    --hy-ox-unified-card-min: clamp(440px, calc(100dvh - 218px), 820px);
  }
}

@media (max-width: 720px) {
  :root {
    --hy-ox-unified-dock-reserve: calc(var(--hy-v7-ox-btn-h, 56px) + 72px + env(safe-area-inset-bottom));
    --hy-ox-unified-panel-min: calc(100dvh - 112px - env(safe-area-inset-bottom));
    --hy-ox-unified-card-min: clamp(420px, calc(100dvh - 218px), 760px);
  }
}

html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: var(--hy-ox-unified-panel-min) !important;
  height: auto !important;
  gap: 16px !important;
  padding-bottom: var(--hy-ox-unified-dock-reserve) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  overflow-y: visible !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox::-webkit-scrollbar,
html body.ox-player-active #appRoot #examPracticeBox::-webkit-scrollbar,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden)::-webkit-scrollbar,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden)::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-stage,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-stage,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-stage,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-stage {
  flex: 0 0 auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  flex: 1 1 auto !important;
  min-height: var(--hy-ox-unified-card-min) !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}

/* 짧은 카드에서는 어떤 잔여 class가 있어도 보이는 스크롤바를 열지 않는다. */
html body #appRoot .exam-player-card.exam-chat-card.hy-ox-short-card,
html body #appRoot .learning-chat-card.hy-ox-short-card,
html body #appRoot .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body #appRoot .learning-chat-card:not(.hy-ox-scroll-needed) {
  overflow-y: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-short-card::-webkit-scrollbar,
html body #appRoot .learning-chat-card.hy-ox-short-card::-webkit-scrollbar,
html body #appRoot .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar,
html body #appRoot .learning-chat-card:not(.hy-ox-scroll-needed)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 긴 카드도 스크롤 표면은 카드 하나로 유지하되, 데스크톱 기본 스크롤바가 디자인을 깨지 않게 숨김. */
html body #appRoot .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body #appRoot .learning-chat-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-scroll-needed::-webkit-scrollbar,
html body #appRoot .learning-chat-card.hy-ox-scroll-needed::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 문항/해설 내부 박스는 절대 별도 스크롤 표면이 되면 안 된다. */
html body #appRoot .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-window,
html body #appRoot .exam-result-area,
html body #appRoot .learning-result-area,
html body #appRoot .exam-feedback,
html body #appRoot .feedback,
html body #appRoot .exam-explanation,
html body #appRoot .explanation {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #appRoot .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body #appRoot .learning-chat-window::-webkit-scrollbar,
html body #appRoot .exam-result-area::-webkit-scrollbar,
html body #appRoot .learning-result-area::-webkit-scrollbar,
html body #appRoot .exam-feedback::-webkit-scrollbar,
html body #appRoot .feedback::-webkit-scrollbar,
html body #appRoot .exam-explanation::-webkit-scrollbar,
html body #appRoot .explanation::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* HYUNWOO V31.26 OX SURFACE BORDER FIX
   회색 면을 문항 박스 내부가 아니라 OX 플레이어 카드 전체 표면으로 통일한다.
   원래 회색 박스가 갖던 외곽선도 O/X 도크 바로 위까지 같이 내려오게 한다.
   평가원 / 주제별 / 오늘의 복습 전부 같은 구조를 쓴다. */
:root {
  --hy-ox-surface-bg: #f8fafc;
  --hy-ox-surface-border: rgba(226, 232, 240, .96);
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  background: var(--hy-ox-surface-bg) !important;
  border: 1px solid var(--hy-ox-surface-border) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07) !important;
  padding: clamp(20px, 3.4vw, 28px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-window {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  flex: 0 0 auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox:not(.exam-has-feedback) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox:not(.exam-has-feedback) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden):not(.learning-has-feedback) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden):not(.learning-has-feedback) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden):not(.learning-has-feedback) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden):not(.learning-has-feedback) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden):not(.learning-has-feedback) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden):not(.learning-has-feedback) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden):not(.learning-has-feedback) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden):not(.learning-has-feedback) > .learning-chat-card {
  justify-content: flex-start !important;
}

/* 복합 선지 칩/현재 기준 박스는 큰 회색 표면 안의 흰 보조 컨트롤로 남긴다. */
html body #appRoot .standard-box,
html body #appRoot .criteria-box,
html body #appRoot .current-standard,
html body #appRoot .kebab-standard,
html body #appRoot .exam-kebab-current,
html body #appRoot .choice-standard,
html body #appRoot .standard-display {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(226, 232, 240, .95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

@media (max-width: 720px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
    border-radius: 26px !important;
    padding: 22px !important;
  }
}

/* HYUNWOO V31.27 OX SURFACE / PREV POSITION FINAL LOCK
   사용자가 스샷으로 찍은 기준을 그대로 적용한다.
   - 평가원 / 주제별 / 오늘의 복습 OX 전부 동일 구조.
   - 회색 플레이어 박스 자체가 아래 O/X 도크 바로 위까지 세로로 내려온다.
   - 회색 박스의 외곽선도 같이 내려온다.
   - 복합 선지의 '이전' 버튼은 박스 하단 바로 위쪽으로 과감하게 내린다.
   - 문항 박스 내부 스크롤 금지, 필요 시 카드 전체만 스크롤. */
:root {
  --hy-ox-final-dock-bottom: calc(14px + env(safe-area-inset-bottom));
  --hy-ox-final-dock-h: 86px;
  --hy-ox-final-dock-reserve: calc(var(--hy-ox-final-dock-h) + 28px + env(safe-area-inset-bottom));
  --hy-ox-final-surface-bg: #f8fafc;
  --hy-ox-final-surface-border: rgba(226, 232, 240, .98);
}

@media (min-width: 761px) {
  :root {
    --hy-ox-final-dock-h: 92px;
    --hy-ox-final-dock-reserve: calc(var(--hy-ox-final-dock-h) + 34px + env(safe-area-inset-bottom));
  }
}

html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  gap: 12px !important;
  padding-top: 6px !important;
  padding-bottom: var(--hy-ox-final-dock-reserve) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-stage,
html body.exam-tab-active #appRoot #examPracticeBox > .learning-stage,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-stage,
html body.ox-player-active #appRoot #examPracticeBox > .learning-stage,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-stage,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-stage,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-stage,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-stage,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-stage,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-stage,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-stage,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-stage {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  background: var(--hy-ox-final-surface-bg) !important;
  border: 1px solid var(--hy-ox-final-surface-border) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07) !important;
  padding: clamp(20px, 3.4vw, 28px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}

@media (max-width: 720px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
  html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
    border-radius: 26px !important;
    padding: 22px !important;
  }
}

/* 회색 박스는 player-card 하나가 담당한다. 안쪽 문항 박스는 기존 내용을 담는 투명 레이어로만 둔다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-window {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* 복합 선지는 문항 내용은 위쪽, '이전' 버튼은 회색 박스 하단 바로 위쪽에 둔다. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card.multi-learning-card > .learning-chat-window {
  flex: 0 0 auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card.multi-learning-card > .exam-multi-control-area {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 0 0 clamp(14px, 2.2dvh, 24px) !important;
  position: relative !important;
  z-index: 24 !important;
}

html body #appRoot .exam-player-card.exam-chat-card.multi-learning-card .multi-bottom-actions,
html body #appRoot .learning-chat-card.multi-learning-card .multi-bottom-actions {
  margin: 0 !important;
  align-items: center !important;
}

/* 답안 도크는 카드 밖, 회색 박스 바로 아래. 평가원/주제별/복습 모두 같은 위치. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-player-dock.floating-answer-dock {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  bottom: var(--hy-ox-final-dock-bottom) !important;
  z-index: 180020 !important;
}

@media (min-width: 761px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.exam-tab-active:not(.bottom-tabbar-hidden) #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.exam-tab-active.bottom-tabbar-hidden #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
  html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-player-dock.floating-answer-dock,
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-player-dock.floating-answer-dock {
    left: 50% !important;
    right: auto !important;
    width: min(1040px, calc(100vw - 240px)) !important;
    max-width: 1040px !important;
    min-width: min(720px, calc(100vw - 48px)) !important;
    transform: translate3d(-50%, 0, 0) !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
}


/* HYUNWOO V31.28 OX SURFACE BREATHING SPACE FIX
   - V31.27 made the unified gray surface too tight.
   - Keep the vertical surface extension, but preserve the preview-like top/left/right/bottom breathing room.
   - Apply the same rule to 평가원 / 주제별 / 오늘의 복습 OX. */
:root {
  --hy-ox-surface-inset-x: clamp(12px, 3.6vw, 18px);
  --hy-ox-surface-gap-y: clamp(12px, 2.8vw, 16px);
  --hy-ox-surface-inner-pad-x: clamp(20px, 5vw, 28px);
  --hy-ox-surface-inner-pad-y: clamp(20px, 4.5vw, 28px);
  --hy-ox-unified-card-min: clamp(392px, calc(100dvh - 238px), 748px);
}

@media (min-width: 901px) {
  :root {
    --hy-ox-surface-inset-x: clamp(16px, 1.8vw, 24px);
    --hy-ox-surface-gap-y: 18px;
    --hy-ox-surface-inner-pad-x: clamp(28px, 3vw, 40px);
    --hy-ox-surface-inner-pad-y: clamp(24px, 3vw, 34px);
    --hy-ox-unified-card-min: clamp(416px, calc(100dvh - 244px), 820px);
  }
}

@media (max-width: 720px) {
  :root {
    --hy-ox-surface-inset-x: clamp(12px, 3.8vw, 16px);
    --hy-ox-surface-gap-y: clamp(12px, 3vw, 15px);
    --hy-ox-surface-inner-pad-x: clamp(20px, 5vw, 26px);
    --hy-ox-surface-inner-pad-y: clamp(20px, 5vw, 26px);
    --hy-ox-unified-card-min: clamp(390px, calc(100dvh - 242px), 734px);
  }
}

html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) {
  gap: var(--hy-ox-surface-gap-y) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  align-self: stretch !important;
  width: auto !important;
  margin-left: var(--hy-ox-surface-inset-x) !important;
  margin-right: var(--hy-ox-surface-inset-x) !important;
  margin-top: 0 !important;
  margin-bottom: var(--hy-ox-surface-gap-y) !important;
  padding-left: var(--hy-ox-surface-inner-pad-x) !important;
  padding-right: var(--hy-ox-surface-inner-pad-x) !important;
  padding-top: var(--hy-ox-surface-inner-pad-y) !important;
  padding-bottom: var(--hy-ox-surface-inner-pad-y) !important;
  min-height: var(--hy-ox-unified-card-min) !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(22px, 5vw, 32px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.045) !important;
}

/* 복합 선지의 이전 버튼은 회색 박스 안 하단 바로 위쪽으로 내리되, 외곽선에 붙지 않게 둔다. */
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .choice-nav-row,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .choice-nav-row,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .choice-nav-row,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .choice-nav-row,
html body.exam-tab-active #appRoot #examPracticeBox .choice-nav-row {
  margin-top: auto !important;
  padding-top: clamp(18px, 4dvh, 42px) !important;
  padding-bottom: clamp(12px, 3dvh, 22px) !important;
}

html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .choice-nav-row .secondary-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .choice-nav-row .secondary-btn,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .choice-nav-row .secondary-btn,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .choice-nav-row .secondary-btn,
html body.exam-tab-active #appRoot #examPracticeBox .choice-nav-row .secondary-btn {
  min-width: clamp(118px, 34vw, 172px) !important;
}

/* HYUNWOO V31.28B OX surface height correction
   Keep the bottom border visible above the O/X dock instead of letting the gray card run underneath it. */
:root {
  --hy-ox-unified-card-min: clamp(420px, calc(100dvh - 350px), 590px);
}
@media (min-width: 901px) {
  :root {
    --hy-ox-unified-card-min: clamp(430px, calc(100dvh - 312px), 680px);
  }
}
@media (max-width: 720px) {
  :root {
    --hy-ox-unified-card-min: clamp(420px, calc(100dvh - 350px), 570px);
  }
}

/* HYUNWOO V31.28C OX surface fixed height pass
   Flex-grow made the surface eat all leftover space and look marginless. Use an explicit surface height so the bottom border stays visible above the O/X dock. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  flex: 0 0 var(--hy-ox-unified-card-min) !important;
  height: var(--hy-ox-unified-card-min) !important;
  min-height: var(--hy-ox-unified-card-min) !important;
  max-height: var(--hy-ox-unified-card-min) !important;
}

/* HYUNWOO V31.28D composite previous-button placement
   Let inner content use the full gray surface height so the previous button can sit near the lower border. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card > .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) .learning-chat-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) .learning-chat-card > .learning-chat-window {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

/* HYUNWOO V31.29 OX SURFACE SPACING REAL FIX
   - v31.28 still let the composite "이전" control sit on/under the gray surface border.
   - Keep the preview direction: gray surface extends downward, but preserves breathing room.
   - Apply the same surface geometry to 평가원 / 주제별 / 오늘의 복습 OX. */
:root {
  --hy-ox-surface-inset-x: clamp(14px, 4.2vw, 20px);
  --hy-ox-surface-gap-y: clamp(12px, 3vw, 16px);
  --hy-ox-surface-inner-pad-x: clamp(22px, 5.4vw, 30px);
  --hy-ox-surface-inner-pad-y: clamp(22px, 5vw, 30px);
  --hy-ox-unified-card-min: clamp(500px, calc(100dvh - 282px), 650px);
  --hy-ox-prev-bottom-gap: clamp(30px, 5.4dvh, 46px);
}

@media (max-width: 720px) {
  :root {
    --hy-ox-surface-inset-x: clamp(14px, 4.2vw, 18px);
    --hy-ox-surface-gap-y: clamp(12px, 3vw, 16px);
    --hy-ox-surface-inner-pad-x: clamp(22px, 5.6vw, 28px);
    --hy-ox-surface-inner-pad-y: clamp(22px, 5.2vw, 28px);
    --hy-ox-unified-card-min: clamp(500px, calc(100dvh - 274px), 620px);
    --hy-ox-prev-bottom-gap: clamp(32px, 5.8dvh, 48px);
  }
}

@media (min-width: 901px) {
  :root {
    --hy-ox-surface-inset-x: clamp(18px, 1.9vw, 26px);
    --hy-ox-surface-gap-y: 18px;
    --hy-ox-surface-inner-pad-x: clamp(30px, 3vw, 42px);
    --hy-ox-surface-inner-pad-y: clamp(26px, 3vw, 36px);
    --hy-ox-unified-card-min: clamp(500px, calc(100dvh - 276px), 700px);
    --hy-ox-prev-bottom-gap: clamp(30px, 4dvh, 48px);
  }
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  position: relative !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  width: auto !important;
  margin-left: var(--hy-ox-surface-inset-x) !important;
  margin-right: var(--hy-ox-surface-inset-x) !important;
  margin-top: 0 !important;
  margin-bottom: var(--hy-ox-surface-gap-y) !important;
  padding-left: var(--hy-ox-surface-inner-pad-x) !important;
  padding-right: var(--hy-ox-surface-inner-pad-x) !important;
  padding-top: var(--hy-ox-surface-inner-pad-y) !important;
  padding-bottom: var(--hy-ox-surface-inner-pad-y) !important;
  flex: 0 0 var(--hy-ox-unified-card-min) !important;
  height: var(--hy-ox-unified-card-min) !important;
  min-height: var(--hy-ox-unified-card-min) !important;
  max-height: var(--hy-ox-unified-card-min) !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(24px, 5vw, 32px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card > .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card > .learning-chat-window {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-question-box.exam-chat-window,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .learning-chat-window,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .learning-chat-window {
  padding-bottom: calc(54px + var(--hy-ox-prev-bottom-gap)) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .exam-multi-control-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card.multi-learning-card > .exam-multi-control-area {
  position: absolute !important;
  left: var(--hy-ox-surface-inner-pad-x) !important;
  right: var(--hy-ox-surface-inner-pad-x) !important;
  bottom: var(--hy-ox-prev-bottom-gap) !important;
  z-index: 25 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body #appRoot .exam-player-card.exam-chat-card.multi-learning-card .multi-bottom-actions,
html body #appRoot .learning-chat-card.multi-learning-card .multi-bottom-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #appRoot .exam-player-card.exam-chat-card.multi-learning-card .multi-back-btn,
html body #appRoot .learning-chat-card.multi-learning-card .multi-back-btn {
  min-width: clamp(116px, 31vw, 170px) !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* HYUNWOO V31.29B: keep the v31.28 surface proportion, fix only the clipped prev control.
   The surface should not crash into the O/X dock; the previous button should sit fully inside the lower border. */
:root {
  --hy-ox-unified-card-min: clamp(430px, calc(100dvh - 334px), 600px);
  --hy-ox-prev-bottom-gap: clamp(34px, 5.2dvh, 48px);
}
@media (max-width: 720px) {
  :root {
    --hy-ox-unified-card-min: clamp(430px, calc(100dvh - 334px), 590px);
    --hy-ox-prev-bottom-gap: clamp(34px, 5.4dvh, 48px);
  }
}
@media (min-width: 901px) {
  :root {
    --hy-ox-unified-card-min: clamp(430px, calc(100dvh - 314px), 680px);
    --hy-ox-prev-bottom-gap: clamp(30px, 4dvh, 48px);
  }
}


/* HYUNWOO V31.31 OX SURFACE / FEEDBACK FILL FINAL
   - 평가원 / 주제별 / 오늘의 복습 OX의 회색 표면 폭을 상단 상태바 폭과 맞춘다.
   - 회색 표면은 O/X 도크 바로 위까지 내려오되, 내부 패딩은 유지한다.
   - 제출 후에는 문항만 compact해지고, 해설/결과 박스가 남은 회색 표면을 채운다.
   - 문항 박스 내부 스크롤은 계속 금지한다. */
:root {
  --hy-ox-frame-x: clamp(18px, 5.2vw, 24px);
  --hy-ox-frame-gap: clamp(10px, 2.4vw, 14px);
  --hy-ox-card-pad-x: clamp(24px, 5.8vw, 34px);
  --hy-ox-card-pad-y: clamp(22px, 5.2vw, 32px);
  --hy-ox-card-h: clamp(520px, calc(100dvh - 250px), 660px);
  --hy-ox-prev-bottom-gap: clamp(30px, 4.8dvh, 44px);
}

@media (max-width: 720px) {
  :root {
    --hy-ox-frame-x: clamp(18px, 5.1vw, 22px);
    --hy-ox-frame-gap: clamp(8px, 2vw, 12px);
    --hy-ox-card-pad-x: clamp(24px, 6vw, 30px);
    --hy-ox-card-pad-y: clamp(22px, 5.6vw, 30px);
    --hy-ox-card-h: clamp(520px, calc(100dvh - 246px), 640px);
    --hy-ox-prev-bottom-gap: clamp(30px, 5dvh, 44px);
  }
}

@media (min-width: 901px) {
  :root {
    --hy-ox-frame-x: clamp(18px, 1.8vw, 28px);
    --hy-ox-frame-gap: 12px;
    --hy-ox-card-pad-x: clamp(30px, 3vw, 44px);
    --hy-ox-card-pad-y: clamp(26px, 3vw, 38px);
    --hy-ox-card-h: clamp(500px, calc(100dvh - 230px), 700px);
    --hy-ox-prev-bottom-gap: clamp(28px, 3.8dvh, 46px);
  }
}

/* OX parent shells: use the same horizontal rail as the upper status card. */
html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.feature-page-active.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) {
  gap: var(--hy-ox-frame-gap) !important;
  padding-bottom: calc(var(--hy-v7-ox-btn-h, 64px) + 32px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* 평가원 / 주제별 / 복습: the gray surface itself. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  position: relative !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  width: calc(100% - (var(--hy-ox-frame-x) * 2)) !important;
  max-width: none !important;
  margin-left: var(--hy-ox-frame-x) !important;
  margin-right: var(--hy-ox-frame-x) !important;
  margin-top: 0 !important;
  margin-bottom: var(--hy-ox-frame-gap) !important;
  padding: var(--hy-ox-card-pad-y) var(--hy-ox-card-pad-x) !important;
  flex: 0 0 var(--hy-ox-card-h) !important;
  height: var(--hy-ox-card-h) !important;
  min-height: var(--hy-ox-card-h) !important;
  max-height: var(--hy-ox-card-h) !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(24px, 5vw, 34px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The text/question block is content only; no nested gray box, no nested scrollbar. */
html body #appRoot .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card > .learning-chat-window {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* Submitted state: only the question gets compact. The result/explanation box fills the rest. */
html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card.exam-answered > .learning-chat-window,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window {
  flex: 0 0 auto !important;
  max-height: clamp(92px, 16dvh, 132px) !important;
  margin-bottom: clamp(14px, 3vw, 20px) !important;
  overflow: hidden !important;
}

html body:not(.dedicated-ox-player) #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window .exam-question,
html body:not(.dedicated-ox-player) #appRoot .learning-chat-card.exam-answered > .learning-chat-window .exam-question,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window .exam-question,
html body.exam-tab-active #appRoot #examPracticeBox .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window .exam-question {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body #appRoot .learning-chat-card.exam-answered > .exam-result-area,
html body #appRoot .learning-chat-card.exam-answered > .learning-result-area,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card > .learning-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card > .learning-result-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card .exam-feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-explanation,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .explanation,
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card .exam-explanation,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback .exam-player-card.exam-chat-card .explanation,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback .exam-player-card.exam-chat-card .explanation {
  flex: 1 1 auto !important;
  min-height: clamp(120px, 22dvh, 240px) !important;
}

/* Composite OX: keep previous button near the lower border but fully inside it. */
html body #appRoot .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body #appRoot .learning-chat-card.multi-learning-card > .exam-multi-control-area {
  position: absolute !important;
  left: var(--hy-ox-card-pad-x) !important;
  right: var(--hy-ox-card-pad-x) !important;
  bottom: clamp(24px, 4.2dvh, 38px) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
}

/* Today OX also follows the same rail and surface ratio when the home quiz is open. */
html body.daily-learning-active #appRoot #dailyQuizShell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--hy-ox-frame-gap) !important;
  padding-bottom: calc(var(--hy-v7-ox-btn-h, 64px) + 32px + env(safe-area-inset-bottom)) !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(100% - (var(--hy-ox-frame-x) * 2)) !important;
  max-width: none !important;
  margin-left: var(--hy-ox-frame-x) !important;
  margin-right: var(--hy-ox-frame-x) !important;
  margin-top: 0 !important;
  margin-bottom: var(--hy-ox-frame-gap) !important;
  padding: var(--hy-ox-card-pad-y) var(--hy-ox-card-pad-x) !important;
  flex: 0 0 var(--hy-ox-card-h) !important;
  height: var(--hy-ox-card-h) !important;
  min-height: var(--hy-ox-card-h) !important;
  max-height: var(--hy-ox-card-h) !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(24px, 5vw, 34px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card > .question-box {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 clamp(14px, 3vw, 20px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .question-box,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .question-box {
  max-height: clamp(92px, 16dvh, 132px) !important;
  overflow: hidden !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop .explanation {
  flex: 1 1 auto !important;
  min-height: clamp(120px, 22dvh, 240px) !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .daily-answer-area {
  margin-top: auto !important;
}

/* O/X dock: sit close to the gray surface, not halfway up the viewport. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* HYUNWOO V31.32 REAL OX SURFACE HEIGHT FIX
   - v31.31 still used a fixed CSS height, so iOS Safari / feature OX kept the old short gray card.
   - The runtime now writes --hy-ox-card-live-h from actual card-top to O/X dock-top.
   - Keep the surface width aligned to the stage/status card by removing extra inner side margins.
   - All OX modes: exam / topic / review / daily. */
:root {
  --hy-ox-card-live-h: var(--hy-ox-card-h, 560px);
  --hy-ox-card-pad-x-final: clamp(22px, 5.6vw, 32px);
  --hy-ox-card-pad-y-final: clamp(22px, 5.4vw, 32px);
  --hy-ox-card-dock-gap: clamp(14px, 3.2vw, 20px);
}
@media (min-width: 901px) {
  :root {
    --hy-ox-card-pad-x-final: clamp(30px, 3vw, 44px);
    --hy-ox-card-pad-y-final: clamp(26px, 2.6vw, 38px);
    --hy-ox-card-dock-gap: 20px;
  }
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: var(--hy-ox-card-dock-gap) !important;
  padding: var(--hy-ox-card-pad-y-final) var(--hy-ox-card-pad-x-final) !important;
  flex: 0 0 var(--hy-ox-card-live-h) !important;
  height: var(--hy-ox-card-live-h) !important;
  min-height: var(--hy-ox-card-live-h) !important;
  max-height: var(--hy-ox-card-live-h) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(24px, 5vw, 34px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body #appRoot .learning-chat-card.hy-ox-scroll-needed,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body #appRoot .learning-chat-card:not(.hy-ox-scroll-needed),
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card:not(.hy-ox-scroll-needed) {
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card > .learning-chat-window,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card > .question-box {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 clamp(14px, 3vw, 20px) 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card.exam-answered > .learning-chat-window,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .question-box,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .question-box {
  flex: 0 0 auto !important;
  max-height: clamp(88px, 14dvh, 122px) !important;
  margin-bottom: clamp(14px, 3vw, 20px) !important;
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body #appRoot .learning-chat-card.exam-answered > .exam-result-area,
html body #appRoot .learning-chat-card.exam-answered > .learning-result-area,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-feedback.show,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-explanation,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .explanation,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-explanation,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop .explanation {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body #appRoot .exam-player-card.exam-chat-card.multi-learning-card > .exam-multi-control-area,
html body #appRoot .learning-chat-card.multi-learning-card > .exam-multi-control-area {
  position: absolute !important;
  left: var(--hy-ox-card-pad-x-final) !important;
  right: var(--hy-ox-card-pad-x-final) !important;
  bottom: clamp(18px, 3.6dvh, 30px) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock,
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}


/* HYUNWOO V31.33 DAILY FEEDBACK EXPLANATION RESTORE
   v31.32 accidentally let the later feedback overflow:hidden rule clip the explanation toggle/content,
   especially in daily multi OX. Keep only the question compact; let feedback/explanation occupy the remaining gray card. */
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .question-box,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .question-box {
  flex: 0 0 auto !important;
  max-height: clamp(86px, 14dvh, 124px) !important;
  min-height: 0 !important;
  margin-bottom: clamp(14px, 3vw, 20px) !important;
  overflow: hidden !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  max-height: none !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .stat-box,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .stat-box,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .support-actions,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .support-actions,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .next-btn,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .next-btn {
  flex: 0 0 auto !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .explanation-toggle-row,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .explanation-toggle-row {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: clamp(12px, 2.4vw, 16px) 0 clamp(8px, 1.8vw, 12px) !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .explanation {
  flex: 1 1 auto !important;
  min-height: clamp(72px, 13dvh, 132px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.correct-pop > .feedback.show > .explanation.explanation-hidden,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.wrong-pop > .feedback.show > .explanation.explanation-hidden {
  display: none !important;
  min-height: 0 !important;
}

/* If daily feedback content is genuinely taller than the card, use the card-level one-scroll only. */
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.hy-ox-scroll-needed.correct-pop,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card.hy-ox-scroll-needed.wrong-pop {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* HYUNWOO V31.34 COMPACT MULTI RESULT LIST
   선지별 결과 리스트가 해설 영역을 잡아먹지 않게 OX 공통으로 압축.
   구조/스크롤/해설 토글은 건드리지 않고 리스트 밀도만 조정. */
html body #appRoot .exam-player-card.exam-chat-card .multi-result-list,
html body #appRoot .learning-chat-card .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-list {
  gap: clamp(6px, 1.5vw, 8px) !important;
  margin: clamp(8px, 1.8vw, 10px) 0 clamp(8px, 1.8vw, 10px) !important;
}

html body #appRoot .exam-player-card.exam-chat-card .multi-result-item,
html body #appRoot .learning-chat-card .multi-result-item,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-item {
  padding: clamp(8px, 1.9vw, 10px) clamp(10px, 2.5vw, 12px) !important;
  border-radius: clamp(11px, 2.8vw, 14px) !important;
}

html body #appRoot .exam-player-card.exam-chat-card .multi-result-top,
html body #appRoot .learning-chat-card .multi-result-top,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-top {
  gap: 8px !important;
  margin-bottom: 3px !important;
  font-size: clamp(12.5px, 3.2vw, 14px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.02em !important;
}

html body #appRoot .exam-player-card.exam-chat-card .multi-result-detail,
html body #appRoot .learning-chat-card .multi-result-detail,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-detail {
  font-size: clamp(11.5px, 3vw, 13px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.018em !important;
}

@media (max-width: 520px) {
  html body #appRoot .exam-player-card.exam-chat-card .multi-result-list,
  html body #appRoot .learning-chat-card .multi-result-list,
  html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-list {
    gap: 6px !important;
    margin: 7px 0 8px !important;
  }

  html body #appRoot .exam-player-card.exam-chat-card .multi-result-item,
  html body #appRoot .learning-chat-card .multi-result-item,
  html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-item {
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  html body #appRoot .exam-player-card.exam-chat-card .multi-result-top,
  html body #appRoot .learning-chat-card .multi-result-top,
  html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-top {
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    margin-bottom: 2px !important;
  }

  html body #appRoot .exam-player-card.exam-chat-card .multi-result-detail,
  html body #appRoot .learning-chat-card .multi-result-detail,
  html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-detail {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }
}

/* HYUNWOO V31.35 FINAL OX SURFACE LOCK
   요구사항 고정:
   - 회색 OX 박스는 O/X 버튼 도크 바로 위까지 내려간다.
   - 평가원 / 주제별 / 오늘의 복습 모두 같은 기하를 쓴다.
   - 오늘의 OX O/X 버튼도 고정 도크로 분리해서 회색 박스 높이 계산이 꼬이지 않게 한다.
   - 제출 후에는 문항 박스만 compact, 결과/해설 영역은 남은 회색 박스를 채운다.
   - 내부 스크롤은 금지, 필요할 때만 카드 전체 1스크롤. */
:root {
  --hy-v35-ox-dock-bottom: calc(14px + env(safe-area-inset-bottom));
  --hy-v35-ox-dock-gap: 8px;
  --hy-v35-ox-dock-width: min(640px, calc(100vw - 28px));
  --hy-v35-ox-dock-pad: 8px;
  --hy-v35-ox-dock-radius: 24px;
  --hy-v35-ox-card-pad-x: clamp(22px, 5.6vw, 32px);
  --hy-v35-ox-card-pad-y: clamp(22px, 5.4vw, 32px);
  --hy-v35-ox-card-min-fallback: clamp(500px, calc(100dvh - 216px), 720px);
  --hy-v35-ox-live-h: var(--hy-ox-card-live-h, var(--hy-v35-ox-card-min-fallback));
}

@media (min-width: 761px) {
  :root {
    --hy-v35-ox-dock-bottom: calc(24px + env(safe-area-inset-bottom));
    --hy-v35-ox-dock-gap: 10px;
    --hy-v35-ox-dock-width: min(1040px, calc(100vw - 240px));
    --hy-v35-ox-card-pad-x: clamp(30px, 3vw, 44px);
    --hy-v35-ox-card-pad-y: clamp(26px, 2.6vw, 38px);
    --hy-v35-ox-card-min-fallback: clamp(500px, calc(100dvh - 210px), 760px);
  }
}

@media (max-width: 420px) {
  :root {
    --hy-v35-ox-dock-width: calc(100vw - 28px);
    --hy-v35-ox-card-pad-x: clamp(22px, 5.8vw, 28px);
    --hy-v35-ox-card-pad-y: clamp(20px, 5.2vw, 28px);
  }
}

/* Daily answer dock must be outside the gray surface, exactly like topic/review/exam. */
html body.daily-learning-active #appRoot #dailyQuizShell .daily-answer-area {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--hy-v35-ox-dock-bottom) !important;
  width: var(--hy-v35-ox-dock-width) !important;
  max-width: 1040px !important;
  min-width: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-dock-z, 52000) !important;
  display: block !important;
  margin: 0 !important;
  padding: var(--hy-v35-ox-dock-pad) !important;
  border-radius: var(--hy-v35-ox-dock-radius) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .daily-answer-area .answer-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell .daily-answer-area .answer-btn {
  height: var(--hy-v7-ox-btn-h, 56px) !important;
  min-height: var(--hy-v7-ox-btn-h, 56px) !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Shared answer dock location. */
html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
  bottom: var(--hy-v35-ox-dock-bottom) !important;
}

@media (min-width: 761px) {
  html body.exam-tab-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
  html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  html body.feature-page-active #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  html body.feature-page-active #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong),
  html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-player-dock.floating-answer-dock:not(.feedback-correct):not(.feedback-wrong) {
    width: var(--hy-v35-ox-dock-width) !important;
    max-width: 1040px !important;
    min-width: 0 !important;
  }
}

/* Parent shells reserve only the fixed dock space. */
html body.daily-learning-active #appRoot #dailyQuizShell,
html body.exam-tab-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #examPracticeBox,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden),
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(8px, 2vw, 12px) !important;
  padding-bottom: calc(var(--hy-v7-ox-btn-h, 56px) + 42px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* One gray surface: same width rail as the top status/card, and bottom calculated by runtime to sit just above the OX dock. */
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .learning-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .learning-chat-card {
  position: relative !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 var(--hy-v35-ox-dock-gap) !important;
  padding: var(--hy-v35-ox-card-pad-y) var(--hy-v35-ox-card-pad-x) !important;
  flex: 0 0 var(--hy-v35-ox-live-h) !important;
  height: var(--hy-v35-ox-live-h) !important;
  min-height: var(--hy-v35-ox-live-h) !important;
  max-height: var(--hy-v35-ox-live-h) !important;
  border: 1px solid rgba(221, 226, 234, 0.98) !important;
  border-radius: clamp(24px, 5vw, 34px) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Before submit: the question area uses the gray surface naturally; no nested scroll. */
html body #appRoot .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card > .learning-chat-window,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card > .question-box {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 clamp(14px, 3vw, 20px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
}

/* After submit: compact only the question; feedback/explanation fills the remaining surface. */
html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card.exam-answered > .learning-chat-window,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop > .question-box,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop > .question-box {
  flex: 0 0 auto !important;
  max-height: clamp(82px, 13dvh, 120px) !important;
  min-height: 0 !important;
  margin-bottom: clamp(12px, 2.6vw, 18px) !important;
  overflow: hidden !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body #appRoot .learning-chat-card.exam-answered > .learning-result-area,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  max-height: none !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-feedback.show,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop > .feedback.show {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  max-height: none !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-explanation,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .explanation,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-explanation,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop .explanation {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop .explanation-toggle-row,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop .explanation-toggle-row,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .explanation-toggle-row,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation-toggle-row,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation-toggle-row {
  flex: 0 0 auto !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Compact result list: keep it readable but stop it from eating the explanation. */
html body #appRoot .exam-player-card.exam-chat-card .multi-result-list,
html body #appRoot .learning-chat-card .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-list {
  gap: 5px !important;
  margin: 6px 0 7px !important;
}
html body #appRoot .exam-player-card.exam-chat-card .multi-result-item,
html body #appRoot .learning-chat-card .multi-result-item,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-item {
  padding: 7px 9px !important;
  border-radius: 11px !important;
}
html body #appRoot .exam-player-card.exam-chat-card .multi-result-top,
html body #appRoot .learning-chat-card .multi-result-top,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-top {
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}
html body #appRoot .exam-player-card.exam-chat-card .multi-result-detail,
html body #appRoot .learning-chat-card .multi-result-detail,
html body.daily-learning-active #appRoot #dailyQuizShell .quiz-card .multi-result-detail {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Scroll policy: inner boxes never show their own scrollbar. Card alone may scroll when runtime marks it. */
html body #appRoot .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-window,
html body #appRoot .question-box,
html body #appRoot .exam-result-area,
html body #appRoot .learning-result-area,
html body #appRoot .exam-feedback,
html body #appRoot .feedback,
html body #appRoot .exam-explanation,
html body #appRoot .explanation {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html body #appRoot .exam-question-box.exam-chat-window::-webkit-scrollbar,
html body #appRoot .learning-chat-window::-webkit-scrollbar,
html body #appRoot .question-box::-webkit-scrollbar,
html body #appRoot .exam-result-area::-webkit-scrollbar,
html body #appRoot .learning-result-area::-webkit-scrollbar,
html body #appRoot .exam-feedback::-webkit-scrollbar,
html body #appRoot .feedback::-webkit-scrollbar,
html body #appRoot .exam-explanation::-webkit-scrollbar,
html body #appRoot .explanation::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body #appRoot .exam-player-card.exam-chat-card.hy-ox-scroll-needed,
html body #appRoot .learning-chat-card.hy-ox-scroll-needed,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.hy-ox-scroll-needed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
html body #appRoot .exam-player-card.exam-chat-card:not(.hy-ox-scroll-needed),
html body #appRoot .learning-chat-card:not(.hy-ox-scroll-needed),
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card:not(.hy-ox-scroll-needed) {
  overflow: hidden !important;
}


/* HYUNWOO V31.36: feedback dock must be overlay-only.
   The "정답입니다" dock must never participate in flex/layout flow or push the white O/X dock/card.
   Daily OX was the missing case: its answer dock lives inside .quiz-card, and feedback docks were not
   included in the fixed selector set. */
html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct,
html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong {
  position: fixed !important;
  inset: auto auto var(--hy-v35-ox-dock-bottom, calc(14px + env(safe-area-inset-bottom))) 50% !important;
  width: var(--hy-v35-ox-dock-width, min(640px, calc(100dvw - 28px))) !important;
  max-width: 1040px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: var(--hy-v7-ox-feedback-z, 53000) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: var(--hy-v35-ox-dock-pad, 8px) !important;
  border-radius: var(--hy-v35-ox-dock-radius, 24px) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  contain: layout paint style !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct .exam-dock-message,
html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-dock-message,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-dock-message {
  min-width: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct .exam-next-btn,
html body.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong .exam-next-btn,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct .exam-next-btn,
html body.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong .exam-next-btn,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-correct .exam-next-btn,
html body.ox-player-active #appRoot #examPracticeBox > .learning-player-dock.feedback-wrong .exam-next-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-correct .exam-next-btn,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-player-dock.feedback-wrong .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-correct .exam-next-btn,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-player-dock.feedback-wrong .exam-next-btn {
  height: var(--hy-v7-ox-btn-h, 56px) !important;
  min-height: var(--hy-v7-ox-btn-h, 56px) !important;
  min-width: 118px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* If a floating feedback dock exists, the old white O/X dock must disappear instead of being pushed. */
html body.daily-learning-active #appRoot #dailyQuizShell:has(> .learning-player-dock.feedback-correct) .daily-answer-area,
html body.daily-learning-active #appRoot #dailyQuizShell:has(> .learning-player-dock.feedback-wrong) .daily-answer-area,
html body.ox-player-active #appRoot #dailyQuizShell:has(> .learning-player-dock.feedback-correct) .daily-answer-area,
html body.ox-player-active #appRoot #dailyQuizShell:has(> .learning-player-dock.feedback-wrong) .daily-answer-area {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Body feedback auto-hide must move the fixed overlay, not reflow anything. */
html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct,
html body:not(.feedback-dock-always).feedback-dock-hidden.daily-learning-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-correct,
html body:not(.feedback-dock-always).feedback-dock-hidden.ox-player-active #appRoot #dailyQuizShell > .learning-player-dock.feedback-wrong {
  transform: translate3d(-50%, calc(100% + 30px), 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* HYUNWOO V31.50 ANSWERED RESULT NATURAL HEIGHT FIX
   기준: v31_36 UI 유지. 실패한 v46~v49 방식(내부 스크롤/flex 고정)을 쓰지 않는다.
   - 정답 알림창 위치/크기/버튼/폰트/아이콘은 건드리지 않는다.
   - 초록 결과 박스는 내용 길이만큼 자연스럽게 커진다.
   - 해설/복합 결과/초록 박스 내부 스크롤은 만들지 않는다.
   - 넘치면 회색 OX 카드가 스크롤 표면이 된다. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .learning-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .learning-chat-card.exam-answered,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .learning-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-chat-card.exam-answered > .learning-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .learning-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-chat-card.exam-answered > .learning-result-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .learning-result-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-result-area,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card > .learning-result-area {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  display: block !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-feedback.show,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-feedback.show,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .learning-chat-card.exam-answered .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .learning-chat-card.exam-answered .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop > .feedback.show {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  display: block !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .multi-result-list,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .multi-result-list,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .multi-result-list,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .multi-result-list,
html body #appRoot .learning-chat-card.exam-answered .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop .multi-result-list,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop .multi-result-list,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-explanation,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-explanation,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .explanation,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation,
html body #appRoot .learning-chat-card.exam-answered .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop .explanation,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop .explanation {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

html body #appRoot .exam-player-card.exam-chat-card.exam-answered .exam-explanation.explanation-hidden,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card .exam-explanation.explanation-hidden,
html body #appRoot .exam-player-card.exam-chat-card.exam-answered .explanation.explanation-hidden,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation.explanation-hidden,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card .explanation.explanation-hidden,
html body #appRoot .learning-chat-card.exam-answered .explanation.explanation-hidden,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop .explanation.explanation-hidden,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop .explanation.explanation-hidden {
  display: none !important;
}

/* HYUNWOO V31.59 ANSWERED GREY CARD BOTTOM FILL
   - V31.52~54의 실패한 CSS 높이/flex 보정을 제거했다.
   - answered 회색 카드의 실제 하단 위치는 ox-runtime.js의 live geometry 한 곳에서만 결정한다.
   - 초록 결과/해설 박스는 V31.50의 자연 높이 규칙을 그대로 사용한다. */

/* HYUNWOO V31.55 OX BOTTOM TABBAR TOUCH FIX
   범위: v31_54 UI 유지 + 하단바 터치 가능화만 보정.
   - 정답 알림/해설/스크롤/카드 크기 로직은 건드리지 않는다.
   - OX 화면의 빈 곳 탭/피드백 숨김 로직이 bottom-tabbar 터치를 가로채지 않도록
     tabbar와 버튼은 peek 상태에서 항상 pointer target이 되게 한다. */
html body.ox-player-active.ox-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-ox-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v6-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v7-tabbar-peek #appRoot .bottom-tabbar,
html body.ox-player-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar,
html body.exam-tab-active.ox-tabbar-peek #appRoot .bottom-tabbar,
html body.exam-tab-active.hy-ox-tabbar-peek #appRoot .bottom-tabbar,
html body.exam-tab-active.hy-v6-tabbar-peek #appRoot .bottom-tabbar,
html body.exam-tab-active.hy-v7-tabbar-peek #appRoot .bottom-tabbar,
html body.exam-tab-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar,
html body.dedicated-ox-player.ox-tabbar-peek #appRoot .bottom-tabbar,
html body.dedicated-ox-player.hy-ox-tabbar-peek #appRoot .bottom-tabbar,
html body.dedicated-ox-player.hy-v6-tabbar-peek #appRoot .bottom-tabbar,
html body.dedicated-ox-player.hy-v7-tabbar-peek #appRoot .bottom-tabbar,
html body.dedicated-ox-player.hy-v8-tabbar-peek #appRoot .bottom-tabbar {
  display: grid !important;
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* Must sit above OX answer/feedback docks (up to 180020), but below report/bookmark modals (240000). */
  z-index: 220000 !important;
}

html body.ox-player-active.ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.ox-player-active.hy-ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.ox-player-active.hy-v6-tabbar-peek #appRoot .bottom-tabbar *,
html body.ox-player-active.hy-v7-tabbar-peek #appRoot .bottom-tabbar *,
html body.ox-player-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar *,
html body.exam-tab-active.ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.exam-tab-active.hy-ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.exam-tab-active.hy-v6-tabbar-peek #appRoot .bottom-tabbar *,
html body.exam-tab-active.hy-v7-tabbar-peek #appRoot .bottom-tabbar *,
html body.exam-tab-active.hy-v8-tabbar-peek #appRoot .bottom-tabbar *,
html body.dedicated-ox-player.ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.dedicated-ox-player.hy-ox-tabbar-peek #appRoot .bottom-tabbar *,
html body.dedicated-ox-player.hy-v6-tabbar-peek #appRoot .bottom-tabbar *,
html body.dedicated-ox-player.hy-v7-tabbar-peek #appRoot .bottom-tabbar *,
html body.dedicated-ox-player.hy-v8-tabbar-peek #appRoot .bottom-tabbar * {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}


/* HYUNWOO V31.63 RESULT EDGE + DAILY PLAYER REPAIR
   - Revert the ineffective V31.62 spacing-only change above.
   - Put the result/explanation surface directly under the compact question.
   - Daily OX uses one stable full-player frame instead of retaining the home hero
     and window-scrolling the entire card after an answer. */
html body #appRoot .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot #topicPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot #reviewPanel.learning-has-feedback > .exam-player-card.exam-chat-card > .exam-question-box.exam-chat-window,
html body #appRoot .learning-chat-card.exam-answered > .learning-chat-window,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.correct-pop > .question-box,
html body.daily-learning-active #appRoot #dailyQuizShell > .quiz-card.wrong-pop > .question-box {
  margin-bottom: 0 !important;
}

html body.daily-learning-active.ox-player-active {
  overflow: hidden !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  padding-bottom: 0 !important;
}

html body.daily-learning-active.ox-player-active #appRoot {
  height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html body.daily-learning-active.ox-player-active #appRoot > [data-study-home]:not(.study-hero-card) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.daily-learning-active.ox-player-active #appRoot > .study-hero-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.daily-learning-active.ox-player-active #appRoot > .study-hero-card > .card-inner {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.daily-learning-active.ox-player-active #appRoot .study-hero-card .daily-hero {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* HYUNWOO V31.67 TARGET-IMAGE ANSWER FLOW
   Verified in a real 390px mobile Chromium render against the approved 942x1536 image.
   The prior V31.63 rule lost the !important specificity contest, leaving three old
   spacers active at once: card gap 14px + question margin 14px + result padding 8px.
   These selectors intentionally include the live body/panel/card answer states so
   this final block wins that cascade without a new runtime-only marker class.

   Invariants:
   - source/tools -> question -> green feedback stay in one top stack;
   - unused gray-card height remains below the green feedback;
   - the gray card is the only scrolling surface;
   - feedback/explanation never becomes an inner scroller. */

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop {
  gap: 0 !important;
  row-gap: 0 !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

/* The approved single-question composition has 16px card inset + 5px text inset.
   Vertical values place source, question, and result at the measured image coordinates. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered:not(.multi-learning-card) > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered:not(.multi-learning-card) > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card) > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card) > .exam-question-box.exam-chat-window {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px 5px 14px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  touch-action: pan-y !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered:not(.multi-learning-card) .exam-question-head,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered:not(.multi-learning-card) .exam-question-head,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card) .exam-question-head,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.learning-chat-card.exam-answered:not(.multi-learning-card) .exam-question-head {
  margin: 0 0 2px !important;
}

/* Composite questions keep their internal chips, but lose the duplicated inter-row gap. */
html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-question-box.exam-chat-window,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop > .question-box,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop > .question-box {
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered > .exam-result-area {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  touch-action: pan-y !important;
}

/* HYUNWOO V31.68 STABLE CARD SCROLL + ANSWER TAIL
   - The gray card is always the one native scroll surface while an OX player is open.
   - Never switch overflow on/off after a gesture starts; iOS drops momentum when the
     scroll container's overflow or height is rewritten between rapid flicks.
   - A real flex tail follows answered content so a near-perfect fit still has enough
     range to lift the final explanation lines above Safari chrome / the feedback dock. */
html body.exam-tab-active #appRoot #examPracticeBox:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  scroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.ox-player-active #appRoot #examPracticeBox:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.ox-player-active #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.ox-player-active #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel:not(.hidden) > .exam-player-card.exam-chat-card::-webkit-scrollbar,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop {
  --hy-ox-answer-scroll-tail: max(76px, calc(48px + env(safe-area-inset-bottom)));
  padding-bottom: var(--hy-ox-card-pad-y-final, 20px) !important;
  scroll-padding-bottom: var(--hy-ox-answer-scroll-tail) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card::after,
html body.exam-tab-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered::after,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card::after,
html body.ox-player-active #appRoot #examPracticeBox > .exam-player-card.exam-chat-card.exam-answered::after,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card::after,
html body.ox-player-active #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered::after,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card::after,
html body.ox-player-active #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered::after,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card::after,
html body.dedicated-ox-player #appRoot #topicPanel.topic-panel > .exam-player-card.exam-chat-card.exam-answered::after,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card::after,
html body.dedicated-ox-player #appRoot #reviewPanel.review-panel > .exam-player-card.exam-chat-card.exam-answered::after,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop::after,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 var(--hy-ox-answer-scroll-tail) !important;
  width: 100% !important;
  height: var(--hy-ox-answer-scroll-tail) !important;
  min-height: var(--hy-ox-answer-scroll-tail) !important;
  background: transparent !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop .daily-question-head > .question-label,
  html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop .daily-question-head > .question-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
  }

  html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop > .question-box > .question,
  html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop > .question-box > .question {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.36 !important;
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
    overflow: visible !important;
  }
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered .feedback.show,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop > .feedback.show,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop > .feedback.show {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  touch-action: pan-y !important;
}

html body.exam-tab-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered .exam-explanation:not(.explanation-hidden),
html body.ox-player-active #appRoot #examPracticeBox.exam-has-feedback > .exam-player-card.exam-chat-card.exam-answered .exam-explanation:not(.explanation-hidden),
html body.ox-player-active #appRoot #topicPanel.topic-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered .explanation:not(.explanation-hidden),
html body.ox-player-active #appRoot #reviewPanel.review-panel.learning-has-feedback > .exam-player-card.exam-chat-card.exam-answered .explanation:not(.explanation-hidden),
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop .explanation:not(.explanation-hidden),
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop .explanation:not(.explanation-hidden) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  touch-action: pan-y !important;
}

/* Daily OX uses the same source/tools row as the approved exam card.
   The tools live in the question corner in the DOM, so they no longer consume
   a separate row at the bottom of the green result box. */
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) {
  animation: none !important;
  transform: none !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) .daily-question-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 2px !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) .daily-question-head > .question-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) .daily-question-support {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 76px !important;
  margin: 0 0 0 auto !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.correct-pop > .question-box,
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.wrong-pop > .question-box {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px 5px 14px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  touch-action: pan-y !important;
}

/* HYUNWOO V31.69 DAILY COMPOSITE DOCK + KEBAB VISUAL CENTER
   - Daily O/X is mounted as a direct shell child, so card transform/overflow can
     never turn the fixed keyboard into a clipped card child on iOS Safari.
   - The daily composite previous control keeps a real tap height and sits at the
     lower edge of the gray card while short content leaves flexible space above it.
   - The exam kebab uses three geometric dots instead of a font ellipsis baseline. */
html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.daily-multi-question > .multi-bottom-actions {
  display: grid !important;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: auto 0 0 !important;
  padding: clamp(14px, 2.8dvh, 22px) 0 0 !important;
  flex: 0 0 auto !important;
  position: static !important;
  box-sizing: content-box !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.daily-multi-question > .multi-bottom-actions > .multi-back-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  line-height: 1 !important;
}

html body.daily-learning-active.ox-player-active #appRoot #dailyQuizShell:not(.hidden) > .quiz-card.daily-multi-question > .multi-bottom-actions > .multi-back-btn:disabled {
  opacity: 0.58 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: #0f172a !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary::marker {
  content: "" !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: -6px 0 0 currentColor, 6px 0 0 currentColor !important;
  transform: translate3d(-50%, -50%, 0) !important;
  pointer-events: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu > summary::after {
  content: none !important;
  display: none !important;
}

/* HYUNWOO V31.70 EXAM YEAR FILTER
   - Academic-year chips are a real multi-select control, independent from order.
   - The count is a preview of the selected year/source combination.
   - The sheet remains one scroll surface when every available year is shown. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-year-filter {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-filter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-filter-head > span {
  flex: 0 0 auto !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-filter-head > output {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-filter.is-empty .exam-year-filter-head > output {
  color: #b91c1c !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip > small {
  display: grid !important;
  place-items: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: #64748b !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip[aria-pressed="true"] {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #ffffff !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip[aria-pressed="true"] > small {
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-year-empty {
  grid-column: 1 / -1 !important;
  padding: 8px 4px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-filter-message {
  display: block !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-filter-message[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-panel {
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.exam-tab-active #appRoot #examPracticeBox .exam-year-chip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* HYUNWOO V31.72 EXAM SETTINGS MODAL
   - The evaluation more-menu uses one real full-viewport backdrop instead of a
     decorative pseudo-element, so taps can never pass through to O/X or tab buttons.
   - The panel follows the settings-dialog geometry on every viewport.
   - Runtime owns modal state, focus trapping, Escape/backdrop close, and inert cleanup. */
html body.exam-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open]::before {
  content: none !important;
  display: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-player-stage.exam-status-header:has(.exam-kebab-menu[open]) {
  position: relative !important;
  z-index: 230000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] {
  position: relative !important;
  z-index: 230001 !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-backdrop {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 230001 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, .30) !important;
  backdrop-filter: blur(10px) saturate(.92) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.92) !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: auto !important;
  touch-action: none !important;
  animation: exam-kebab-backdrop-in .18s ease-out both !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-panel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 230002 !important;
  display: grid !important;
  width: min(560px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  max-width: 560px !important;
  height: auto !important;
  max-height: min(780px, calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  margin: 0 !important;
  padding: 18px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  border: 1px solid rgba(203, 213, 225, .98) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 28px 84px rgba(15, 23, 42, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translate3d(-50%, -50%, 0) !important;
  translate: none !important;
  opacity: 1 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  animation: exam-kebab-panel-in .20s ease-out both !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 38px !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-head .exam-kebab-title {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-close {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: none !important;
  line-height: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body.exam-menu-open #appRoot #examPracticeBox > .exam-player-card,
html body.exam-menu-open #appRoot #examPracticeBox > .exam-player-card *,
html body.exam-menu-open #appRoot #examPracticeBox > .exam-choice-area,
html body.exam-menu-open #appRoot #examPracticeBox > .exam-choice-area *,
html body.exam-menu-open #appRoot #examPracticeBox > .learning-player-dock,
html body.exam-menu-open #appRoot #examPracticeBox > .learning-player-dock *,
html body.exam-menu-open #appRoot > .bottom-tabbar,
html body.exam-menu-open #appRoot > .bottom-tabbar * {
  pointer-events: none !important;
}

@keyframes exam-kebab-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes exam-kebab-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-panel {
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-backdrop,
  html body.exam-tab-active #appRoot #examPracticeBox .exam-kebab-menu[open] > .exam-kebab-panel {
    animation: none !important;
  }
}

/* HYUNWOO V31.96: Canvas streak smoke stays and moves strictly inside the streak orb. */
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  contain: paint !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb::after,
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb .exam-status-smoke {
  display: none !important;
  animation: none !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb .streak-particle-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: blur(1.25px) saturate(1.2) contrast(1.03) !important;
  transform: translateZ(0) !important;
  mix-blend-mode: multiply !important;
}

html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb > span:not(.exam-status-smoke),
html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb > strong {
  position: relative !important;
  z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.exam-tab-active #appRoot #examPracticeBox .exam-streak-status.exam-streak-orb .streak-particle-canvas {
    filter: blur(1px) saturate(1.06) !important;
  }
}