:root {
      --bg: #f7f8fb;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --surface-muted: #f1f5f9;
      --line: #e2e8f0;
      --line-strong: #cbd5e1;
      --text: #0f172a;
      --text-soft: #334155;
      --muted: #64748b;
      --muted-light: #94a3b8;
      --point: #64748b;
      --point-dark: #475569;
      --navy: #0f172a;
      --correct: #15803d;
      --correct-bg: #f0fdf4;
      --correct-line: #86efac;
      --wrong: #b91c1c;
      --wrong-bg: #fef2f2;
      --wrong-line: #fca5a5;
      --warning: #a16207;
      --warning-bg: #fefce8;
      --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
      --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.055);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR",
        "Apple SD Gothic Neo", "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      padding: 30px 14px 54px;
    }

    body.compact-mode .card-inner {
      padding: 18px;
    }

    body.compact-mode .card,
    body.compact-mode .profile-hero,
    body.compact-mode .profile-mini-panel,
    body.compact-mode .profile-section-card {
      border-radius: 18px;
      margin-bottom: 12px;
    }

    body.reduce-motion *,
    body.reduce-motion *::before,
    body.reduce-motion *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }

    button,
    input {
      font-family: inherit;
    }

    button {
      -webkit-tap-highlight-color: transparent;
    }

    button:focus-visible,
    input:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.16);
    }

    .app {
      width: 100%;
      max-width: 960px;
      display: flex;
      flex-direction: column;
    }

    .app-hidden,
    .hidden {
      display: none !important;
    }

    .name-gate {
      width: 100%;
      max-width: 480px;
      min-height: calc(100vh - 80px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .name-card {
      width: 100%;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: 30px 24px;
      backdrop-filter: blur(10px);
    }

    .gate-kicker {
      color: var(--point-dark);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: 0.12em;
      margin-bottom: 12px;
    }

    .name-card h1 {
      margin: 0 0 10px;
      color: var(--text);
      font-size: 28px;
      font-weight: 950;
      line-height: 1.25;
    }

    .name-card p {
      margin: 0 0 20px;
      color: var(--muted);
      line-height: 1.65;
      font-size: 14px;
      word-break: keep-all;
    }

    .name-card input {
      width: 100%;
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text);
      border-radius: 16px;
      padding: 15px;
      font-size: 16px;
      outline: none;
      margin-bottom: 12px;
    }

    .name-card input:focus {
      border-color: var(--line-strong);
      box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
    }

    .pin-input-wrap {
      position: relative;
      margin-bottom: 12px;
    }

    .pin-input-wrap input {
      padding-right: 54px;
      margin-bottom: 0;
    }

    .name-card .pin-toggle-btn {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--muted);
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .name-card .pin-toggle-btn:hover {
      background: var(--surface-soft);
      color: var(--text);
    }

    .pin-toggle-btn svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    .pin-toggle-btn .eye-closed {
      display: none;
    }

    .pin-toggle-btn.is-visible .eye-open {
      display: none;
    }

    .pin-toggle-btn.is-visible .eye-closed {
      display: block;
    }

    .gate-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .name-card button {
      width: 100%;
      border: 0;
      border-radius: 16px;
      background: var(--navy);
      color: #ffffff;
      padding: 16px;
      font-size: 16px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
    }

    .name-card button:disabled {
      cursor: not-allowed;
      opacity: 0.58;
      box-shadow: none;
    }

    .name-card .register-btn {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      box-shadow: none;
    }

    .gate-message {
      margin-top: 12px;
      color: var(--wrong);
      font-size: 14px;
      line-height: 1.5;
      min-height: 20px;
    }

    .topbar {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 6px 2px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      gap: 12px;
      backdrop-filter: none;
    }

    .brand {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(26px, 5.5vw, 34px);
      letter-spacing: -0.02em;
      font-weight: 950;
      color: var(--text);
      line-height: 1.25;
    }

    .brand span {
      color: var(--muted);
      font-size: 14px;
      font-weight: 850;
    }

    .user-area {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .user-pill {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: 999px;
      padding: 10px 13px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .logout-btn {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .settings-btn {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text-soft);
      cursor: pointer;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    .settings-btn:hover {
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }

    .settings-btn:active {
      transform: scale(0.96);
    }

    .settings-btn svg {
      width: 18px;
      height: 18px;
      display: block;
      overflow: visible;
    }

    .card {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      backdrop-filter: none;
      margin-bottom: 16px;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .card:hover {
      border-color: rgba(203, 213, 225, 0.95);
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
    }

    .card-inner {
      padding: 24px;
    }

    .section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 22px 2px 10px;
      color: var(--text);
      font-size: 15px;
      font-weight: 950;
    }

    .section-label span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .home-daily-label { order: 10; }
    .study-hero-card { order: 11; }
    .home-shortcut-label { order: 20; }
    .quick-launch-grid { order: 21; }
    .home-storage-label { order: 30; }
    .dashboard-grid { order: 31; }
    .study-storage-card { order: 32; }
    .home-archive-card { order: 40; }
    .footer { order: 90; }
    .bottom-tabbar { order: 100; }

    .study-hero-card {
      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.075);
    }

    .study-hero-card .card-inner {
      background:
        radial-gradient(circle at 94% 8%, rgba(100, 116, 139, 0.08), transparent 34%),
        #ffffff;
    }

    .study-feature-card .card-inner,
    .study-storage-card .card-inner {
      padding: 20px;
    }

    .study-feature-card .section-head,
    .study-storage-card .section-head {
      margin-bottom: 12px;
    }

    .study-feature-card .section-title,
    .study-storage-card .section-title {
      font-size: 18px;
    }

    .study-feature-card .section-desc,
    .study-storage-card .section-desc {
      margin-bottom: 0;
    }

    .study-feature-card {
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.052);
    }

    body.feature-page-active .topbar,
    body.feature-page-active .bottom-tabbar {
      display: none;
    }

    body.feature-page-active .app {
      max-width: 820px;
    }

    body.feature-page-active .study-feature-nav {
      display: flex !important;
      order: 1;
      margin-top: 0;
      padding: 10px 2px 4px;
    }

    body.feature-page-active .study-feature-title {
      font-size: clamp(24px, 6vw, 34px);
    }

    body.feature-page-active .study-feature-card {
      order: 2;
      border-radius: 28px;
      box-shadow: 0 20px 54px rgba(15, 23, 42, 0.09);
      min-height: calc(100vh - 120px);
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding: clamp(22px, 5vw, 34px);
    }

    body.feature-page-active .study-feature-card .section-head {
      display: none;
    }
.feature-command-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #ffffff;
      padding: 12px;
      margin-bottom: 16px;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
    }

    .feature-command-title {
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
    }

    .feature-command-copy {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      margin-top: 3px;
    }

    .feature-toolbelt {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(203, 213, 225, 0.86);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.86);
      padding: 12px;
      margin: 0 0 18px;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.075);
      backdrop-filter: blur(14px);
    }

    .feature-search {
      width: 100%;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      color: var(--text);
      padding: 0 15px;
      font-size: 14px;
      font-weight: 850;
    }

    .feature-search::placeholder {
      color: #94a3b8;
    }

    .feature-filter-row,
    .exam-control-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .feature-filter-btn,
    .exam-control-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .feature-filter-btn:hover,
    .exam-control-btn:hover {
      transform: translateY(-1px);
      border-color: #94a3b8;
    }

    .feature-filter-btn.active,
    .exam-control-btn.primary {
      background: #111827;
      border-color: #111827;
      color: #ffffff;
    }

    .review-count-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      height: 28px;
      border-radius: 999px;
      background: #111827;
      color: #ffffff;
      font-size: 12px;
      font-weight: 950;
      margin-left: 8px;
      vertical-align: middle;
    }

    .exam-control-panel {
      display: none;
    }

    body.exam-tab-active .exam-control-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid rgba(203, 213, 225, 0.82);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.86);
      padding: 12px;
      margin: 0 0 18px;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
      backdrop-filter: blur(14px);
    }

    .exam-control-copy {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.5;
    }

    body.feature-page-active {
      background: var(--bg);
      padding-top: 16px;
    }

    body.feature-page-active .app {
      max-width: 760px;
      gap: 14px;
    }

    body.feature-page-active .study-feature-nav {
      position: sticky;
      top: 10px;
      z-index: 20;
      align-items: center;
      justify-content: space-between;
      border: 1px solid rgba(203, 213, 225, 0.78);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.84);
      padding: 8px;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09);
      backdrop-filter: blur(18px);
    }

    body.feature-page-active .study-home-btn {
      border: 0;
      background: #0f172a;
      color: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active .study-feature-title {
      margin-right: 12px;
      color: #111827;
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    body.feature-page-active .study-feature-card {
      border: 0;
      background: transparent;
      box-shadow: none;
      min-height: calc(100vh - 96px);
    }

    body.feature-page-active .study-feature-card:hover {
      border-color: transparent;
      box-shadow: none;
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding: 0;
    }

    body.feature-page-active .topic-grid,
    body.feature-page-active .passage-library-grid,
    body.feature-page-active .review-mode-grid {
      gap: 16px;
    }

    .study-storage-card {
      background: #fbfcfe;
    }

    .quick-launch-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .quick-launch-btn {
      display: grid;
      gap: 8px;
      justify-items: center;
      min-height: 112px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #ffffff;
      color: var(--text);
      padding: 16px 10px 14px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
      cursor: pointer;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .quick-launch-btn:hover {
      border-color: var(--line-strong);
      background: #fbfcfe;
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
    }

    .quick-launch-btn:active {
      transform: scale(0.97);
    }

    .quick-launch-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: #f1f5f9;
      color: var(--text-soft);
      font-size: 18px;
      font-weight: 950;
    }

    .quick-launch-title {
      font-size: 14px;
      font-weight: 950;
      text-align: center;
    }

    .quick-launch-sub {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-align: center;
      line-height: 1.35;
    }

    .study-feature-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 18px 2px 12px;
    }

    .study-feature-title {
      color: var(--text);
      font-size: 19px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    .study-home-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 9px 13px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
    }

    .profile-summary {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 14px;
      margin-bottom: 16px;
    }

    .profile-hero,
    .profile-mini-panel {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      padding: 22px;
    }

    .profile-hero {
      background:
        radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.12), transparent 32%),
        radial-gradient(circle at 92% 16%, rgba(100, 116, 139, 0.1), transparent 34%),
        #ffffff;
    }

    .profile-kicker,
    .profile-mini-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
    }

    .profile-main-number {
      margin-top: 8px;
      color: var(--text);
      font-size: clamp(32px, 7vw, 48px);
      font-weight: 950;
      letter-spacing: -0.05em;
      line-height: 1;
    }

    .profile-main-caption {
      margin-top: 8px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 850;
    }

    .profile-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .profile-mini-item {
      border-radius: 18px;
      background: #f8fafc;
      padding: 14px;
    }

    .profile-mini-value {
      margin-top: 6px;
      color: var(--text);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.03em;
    }

    .year-heatmap {
      display: grid;
      grid-template-columns: repeat(7, minmax(30px, 1fr));
      gap: 6px;
      margin: 12px 0 4px;
    }

    .year-cell {
      aspect-ratio: 1;
      border: 0;
      border-radius: 5px;
      background: #f1f5f9;
      cursor: pointer;
    }

    .year-cell.l1 { background: #ede9fe; }
    .year-cell.l2 { background: #c4b5fd; }
    .year-cell.l3 { background: #8b5cf6; }

    .profile-section-card {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      padding: 20px;
      margin-bottom: 16px;
    }

    .profile-card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      color: var(--text);
      font-size: 15px;
      font-weight: 950;
    }

    .profile-card-title span:last-child {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .profile-date-detail {
      border: 1px solid #dbe3ee;
      border-radius: 22px;
      background:
        radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.12), transparent 30%),
        #ffffff;
      padding: 16px;
      margin-top: 14px;
    }

    .profile-date-detail .profile-mini-grid {
      margin-top: 10px;
    }

    .year-cell.active {
      outline: 2px solid #111827;
      outline-offset: 2px;
    }

    .storage-hub {
      grid-column: 1 / -1;
    }

    .storage-hub-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .storage-hub-item {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #f8fafc;
      padding: 16px;
    }

    .storage-hub-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--text);
      font-size: 17px;
      font-weight: 950;
    }

    .storage-hub-stat {
      margin: 8px 0 14px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 850;
    }

    .my-rank-card {
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.035), transparent),
        #ffffff;
      padding: 16px;
      margin-bottom: 14px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .my-rank-card.missing {
      border-style: dashed;
      color: var(--muted);
    }

    .my-rank-badge {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--navy);
      color: #ffffff;
      font-size: 15px;
      font-weight: 950;
    }

    .leaderboard-row.me {
      border-color: #94a3b8;
      background: #f8fafc;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .leaderboard-card.me {
      border-color: #94a3b8;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
    }

    .section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .section-title {
      margin: 0;
      font-size: 20px;
      font-weight: 950;
      color: var(--text);
      line-height: 1.35;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-desc {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      word-break: keep-all;
    }

    .soft-btn {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: 16px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 7px 16px rgba(15, 23, 42, 0.045);
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .soft-btn:hover {
      background: #ffffff;
      border-color: var(--line-strong);
      color: var(--text);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
    }

    .soft-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.045);
    }

    .primary-btn {
      border: 0;
      background: #64748b;
      color: #ffffff;
      border-radius: 16px;
      padding: 14px 22px;
      font-size: 15px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(71, 85, 105, 0.18);
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }

    .primary-btn:hover {
      filter: brightness(1.03);
      background: #475569;
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(71, 85, 105, 0.22);
    }

    .primary-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 7px 18px rgba(71, 85, 105, 0.18);
    }

    .primary-btn.restart-style {
      border: 1px solid var(--line);
      background: #f1f5f9;
      color: var(--text-soft);
      box-shadow: 0 7px 16px rgba(15, 23, 42, 0.045);
    }

    .primary-btn.restart-style:hover {
      filter: none;
      background: #e2e8f0;
      color: var(--text);
      box-shadow: 0 9px 18px rgba(15, 23, 42, 0.07);
    }

    .primary-btn.restart-style:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.045);
    }

    .primary-btn:disabled,
    .soft-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
      filter: none;
    }

    .daily-hero {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 150px;
      align-items: center;
      gap: 18px;
      min-height: 156px;
      isolation: isolate;
    }

    .daily-hero::before {
      content: "";
      position: absolute;
      inset: -24px -24px -22px;
      background: #f8fafc;
      z-index: -1;
    }

    .daily-title-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .daily-icon,
.mini-icon,
.title-icon {
  width: 44px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.05em;
  flex: 0 0 auto;
}

    .daily-title {
      margin: 0;
      font-size: 24px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    .daily-date {
      color: var(--text-soft);
      font-size: 15px;
      font-weight: 800;
      display: none;
    }

    .daily-desc {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
      margin: 0 0 18px;
      word-break: keep-all;
    }

    .daily-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: -6px 0 18px;
    }

    .daily-hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: 999px;
      color: var(--text-soft);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
    }

    .daily-hero-chip strong {
      color: var(--text);
      font-weight: 1000;
      font-variant-numeric: tabular-nums;
    }

    .circle-progress {
      --progress: 0;
      --ring: 7px;
      width: 124px;
      height: 124px;
      border-radius: 50%;
      position: relative;
      justify-self: end;
      background: #ffffff;
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
    }

    .circle-progress::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        #7c8fae 0%,
        #7c8fae calc(var(--progress) * 1%),
        #e2e8f0 calc(var(--progress) * 1%),
        #e2e8f0 100%
      );
      z-index: 0;
    }

    .circle-progress::after {
      content: "";
      position: absolute;
      inset: var(--ring);
      border-radius: 50%;
      background: #ffffff;
      box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
      z-index: 1;
    }

    .circle-progress strong {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -60%);
      width: 100%;
      text-align: center;
      font-size: 29px;
      font-weight: 1000;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 0 currentColor;
      -webkit-text-stroke: 0.35px currentColor;
      z-index: 2;
    }

    .circle-progress span {
      position: absolute;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 850;
      line-height: 1;
      z-index: 2;
    }

    .quiz-shell {
      border-top: 1px solid var(--line);
      margin-top: 22px;
      padding-top: 22px;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }

    .app-tab-hidden {
      display: none !important;
    }

    .bottom-tabbar {
      position: fixed;
      left: 50%;
      bottom: 16px;
      z-index: 40;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      width: min(560px, calc(100vw - 28px));
      padding: 8px;
      border: 1px solid rgba(226, 232, 240, 0.94);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
      backdrop-filter: blur(18px);
      transform: translateX(-50%);
      overflow: hidden;
      --active-index: 0;
    }

    .bottom-tabbar::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 8px;
      width: calc((100% - 16px) / 4);
      height: calc(100% - 16px);
      border-radius: 17px;
      background: #eef2f7;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
      transform: translateX(calc(var(--active-index) * 100%));
      transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .bottom-tab-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 44px;
      border: 0;
      border-radius: 17px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      position: relative;
      z-index: 1;
      transition: transform 0.16s ease, color 0.2s ease;
    }

    .bottom-tab-btn svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke-width: 2.3;
    }

    .bottom-tab-btn.active {
      color: var(--text);
      background: transparent;
      box-shadow: none;
    }

    .bottom-tab-btn:active {
      transform: scale(0.96);
    }

    .exam-tab-card {
      grid-column: 1 / -1;
    }

    .hall-tab-card {
      grid-column: 1 / -1;
    }

    .hall-tab-card .card-inner {
      background:
        radial-gradient(circle at 20% 0%, rgba(250, 204, 21, 0.12), transparent 34%),
        radial-gradient(circle at 82% 12%, rgba(148, 163, 184, 0.16), transparent 32%),
        #fff;
    }

    .profile-tab-card {
      grid-column: 1 / -1;
    }

    body.exam-tab-active .exam-tab-card {
      grid-column: 1 / -1;
      border-radius: 30px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    body.exam-tab-active .exam-tab-card .card-inner {
      min-height: calc(100vh - 118px);
      padding: clamp(18px, 4vw, 28px);
      background: #ffffff;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 32px;
      box-shadow: 0 22px 54px rgba(15, 23, 42, 0.08);
    }

    body.exam-tab-active .exam-tab-card .section-head,
    body.exam-tab-active .exam-tab-card .mini-visual-wrap,
    body.exam-tab-active .exam-tab-card .exam-control-panel,
    body.exam-tab-active .exam-tab-card .exam-player-status {
      display: none;
    }

    body.exam-tab-active .exam-tab-card .section-title {
      font-size: clamp(28px, 7vw, 42px);
      letter-spacing: -0.055em;
    }

    body.exam-tab-active .exam-tab-card .section-desc {
      max-width: 560px;
      margin-top: 8px;
      font-size: 15px;
      line-height: 1.6;
    }

    .exam-player-status {
      display: none;
    }

    body.exam-tab-active .exam-player-status {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 22px 0 18px;
    }

    .exam-player-status > div {
      border: 1px solid rgba(203, 213, 225, 0.82);
      border-radius: 22px;
      background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      padding: 16px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
    }

    .exam-player-status span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .exam-player-status strong {
      color: var(--text);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.035em;
    }

    .profile-tab-card .stats-grid {
      display: block;
    }

    body.exam-tab-active #examPracticeBox {
      padding-bottom: 132px;
      min-height: calc(100vh - 190px);
    }

    .mini-card {
      position: relative;
      min-height: 210px;
    }

    .mini-card:hover .mini-visual {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
    }

    .mini-card .card-inner {
      min-height: 210px;
      display: flex;
      flex-direction: column;
    }

.mini-visual-wrap {
  position: absolute;
  right: 36px;
  top: 78px;
  width: 92px;
  height: 92px;
  overflow: visible;
  z-index: 0;
}

.mini-visual-wrap.simple {
  pointer-events: none;
}

.mini-visual {
  position: absolute;
  right: 36px;
  top: 78px;
  width: 92px;
  height: 92px;
  z-index: 2;
  border-radius: 50%;
  background: #f8fafc;
  color: #7c8fae;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.04em;
  border: 1px solid #eef2f7;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mini-visual-wrap .mini-visual {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  height: 100%;
}

    .streak-smoke {
      position: absolute;
      inset: -12px;
      z-index: 1;
      border-radius: 50%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 44%, rgba(var(--streak-rgb), 0.34) 0 6%, rgba(var(--streak-rgb), 0.12) 12%, transparent 25%),
        radial-gradient(ellipse at 80% 36%, rgba(var(--streak-rgb), 0.28) 0 5%, rgba(var(--streak-rgb), 0.11) 13%, transparent 26%),
        radial-gradient(ellipse at 62% 82%, rgba(var(--streak-rgb), 0.26) 0 7%, rgba(var(--streak-rgb), 0.1) 14%, transparent 28%),
        radial-gradient(ellipse at 32% 75%, rgba(var(--streak-rgb), 0.22) 0 5%, rgba(var(--streak-rgb), 0.08) 13%, transparent 25%),
        radial-gradient(ellipse at 50% 18%, rgba(var(--streak-rgb), 0.2) 0 5%, transparent 22%);
      filter: blur(8px) saturate(1.08);
      mix-blend-mode: multiply;
      opacity: 0.44;
      transform: translate3d(0, 0, 0) scale(0.82) rotate(0deg);
      animation: streakInkDrift 18s linear infinite;
      will-change: transform, opacity, border-radius;
    }

    .streak-smoke::before,
    .streak-smoke::after {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 43% 57% 61% 39% / 52% 45% 55% 48%;
      background:
        radial-gradient(ellipse at 26% 30%, rgba(var(--streak-rgb), 0.18) 0 7%, transparent 23%),
        radial-gradient(ellipse at 70% 70%, rgba(var(--streak-rgb), 0.16) 0 8%, transparent 24%),
        radial-gradient(ellipse at 42% 68%, rgba(var(--streak-rgb), 0.12) 0 6%, transparent 20%);
      filter: blur(7px);
      opacity: 0.88;
      animation: streakInkVein 9.5s ease-in-out infinite;
    }

    .streak-smoke::after {
      inset: 0;
      opacity: 0.64;
      transform: rotate(24deg);
      animation-duration: 12s;
      animation-direction: reverse;
    }

    .streak-smoke.secondary {
      inset: -16px;
      filter: blur(11px) saturate(1.06);
      animation-name: streakInkDriftAlt;
      animation-delay: -1.6s;
      animation-duration: 24s;
    }

    .mini-visual-wrap {
      --streak-rgb: 20, 184, 166;
    }

    .mini-visual-wrap:not(.streak) .streak-smoke {
      display: none;
    }

    .mini-visual-wrap.streak {
      --streak-rgb: 20, 184, 166;
    }

    .mini-visual-wrap.streak-5 {
      --streak-rgb: 20, 184, 166;
    }

    .mini-visual-wrap.streak-10 {
      --streak-rgb: 59, 130, 246;
    }

    .mini-visual-wrap.streak-15 {
      --streak-rgb: 139, 92, 246;
    }

    .mini-visual-wrap.streak-20 {
      --streak-rgb: 225, 29, 72;
    }

    .mini-visual-wrap.streak-25 {
      --streak-rgb: 245, 158, 11;
    }

    .mini-visual-wrap.streak-30 {
      --streak-rgb: 34, 197, 94;
    }

    .mini-visual-wrap.streak-35 {
      --streak-rgb: 124, 58, 237;
    }

    .mini-visual-wrap.streak-40 {
      --streak-rgb: 245, 158, 11;
    }

    .mini-visual-wrap.streak-20 .mini-visual,
    .mini-visual-wrap.streak-25 .mini-visual,
    .mini-visual-wrap.streak-30 .mini-visual,
    .mini-visual-wrap.streak-35 .mini-visual,
    .mini-visual-wrap.streak-40 .mini-visual {
      color: rgb(var(--streak-rgb));
      font-size: 22px;
      font-weight: 1000;
      letter-spacing: -0.07em;
      text-shadow:
        0 0 10px rgba(var(--streak-rgb), 0.23),
        0 0 18px rgba(var(--streak-rgb), 0.12);
    }

    .mini-visual-wrap.streak-25 .mini-visual,
    .mini-visual-wrap.streak-30 .mini-visual,
    .mini-visual-wrap.streak-35 .mini-visual,
    .mini-visual-wrap.streak-40 .mini-visual {
      font-size: 24px;
      transform: scale(1.04);
      text-shadow:
        0 0 10px rgba(var(--streak-rgb), 0.34),
        0 0 22px rgba(var(--streak-rgb), 0.18),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .mini-visual-wrap.streak-30 .mini-visual {
      font-size: 25px;
      text-shadow:
        0 0 12px rgba(var(--streak-rgb), 0.4),
        0 0 26px rgba(var(--streak-rgb), 0.22),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .mini-visual-wrap.streak-35 .mini-visual {
      font-size: 26px;
      text-shadow:
        0 0 14px rgba(var(--streak-rgb), 0.46),
        0 0 30px rgba(var(--streak-rgb), 0.27),
        0 0 42px rgba(var(--streak-rgb), 0.14),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .mini-visual-wrap.streak-40 .mini-visual {
      color: #8b5cf6;
      font-size: 27px;
      text-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 16px rgba(244, 114, 182, 0.32),
        0 0 24px rgba(125, 211, 252, 0.3),
        0 0 34px rgba(196, 181, 253, 0.28),
        0 2px 0 rgba(255, 255, 255, 0.96);
    }

    .mini-visual-wrap.streak-25 .streak-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(245, 158, 11, 0.42) 0 7%, rgba(245, 158, 11, 0.16) 14%, transparent 28%),
        radial-gradient(ellipse at 80% 36%, rgba(217, 119, 6, 0.34) 0 6%, rgba(217, 119, 6, 0.13) 15%, transparent 29%),
        radial-gradient(ellipse at 62% 82%, rgba(251, 191, 36, 0.34) 0 8%, rgba(251, 191, 36, 0.13) 16%, transparent 30%),
        radial-gradient(ellipse at 32% 75%, rgba(180, 83, 9, 0.28) 0 6%, rgba(180, 83, 9, 0.11) 15%, transparent 28%),
        radial-gradient(ellipse at 50% 18%, rgba(253, 230, 138, 0.26) 0 7%, transparent 25%);
      filter: blur(8px) saturate(1.26);
    }

    .mini-visual-wrap.streak-30 .streak-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(34, 197, 94, 0.5) 0 10%, rgba(34, 197, 94, 0.2) 18%, transparent 35%),
        radial-gradient(ellipse at 80% 36%, rgba(22, 163, 74, 0.42) 0 9%, rgba(22, 163, 74, 0.16) 18%, transparent 34%),
        radial-gradient(ellipse at 62% 82%, rgba(74, 222, 128, 0.4) 0 10%, rgba(74, 222, 128, 0.16) 19%, transparent 35%),
        radial-gradient(ellipse at 32% 75%, rgba(20, 184, 166, 0.31) 0 8%, rgba(20, 184, 166, 0.12) 17%, transparent 32%),
        radial-gradient(ellipse at 50% 18%, rgba(187, 247, 208, 0.28) 0 8%, transparent 28%),
        radial-gradient(ellipse at 24% 30%, rgba(250, 204, 21, 0.28) 0 5%, rgba(250, 204, 21, 0.12) 11%, transparent 23%),
        radial-gradient(ellipse at 70% 58%, rgba(253, 224, 71, 0.26) 0 5%, rgba(253, 224, 71, 0.11) 12%, transparent 24%),
        radial-gradient(ellipse at 46% 78%, rgba(254, 240, 138, 0.2) 0 4%, rgba(254, 240, 138, 0.08) 10%, transparent 21%);
      filter: blur(8.4px) saturate(1.42) brightness(1.03);
    }

    .mini-visual-wrap.streak-35 .streak-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(109, 40, 217, 0.5) 0 9%, rgba(109, 40, 217, 0.2) 17%, transparent 32%),
        radial-gradient(ellipse at 80% 36%, rgba(2, 132, 199, 0.42) 0 7%, rgba(2, 132, 199, 0.16) 16%, transparent 31%),
        radial-gradient(ellipse at 62% 82%, rgba(168, 85, 247, 0.34) 0 8%, rgba(168, 85, 247, 0.13) 17%, transparent 33%),
        radial-gradient(ellipse at 32% 75%, rgba(67, 56, 202, 0.38) 0 7%, rgba(67, 56, 202, 0.15) 16%, transparent 31%),
        radial-gradient(ellipse at 50% 18%, rgba(125, 211, 252, 0.26) 0 7%, transparent 26%);
      filter: blur(8.4px) saturate(1.62) brightness(0.98);
    }

    .mini-visual-wrap.streak-40 .streak-smoke {
      background:
        radial-gradient(ellipse at 16% 50%, rgba(45, 212, 191, 0.48) 0 18%, rgba(45, 212, 191, 0.19) 34%, transparent 57%),
        radial-gradient(ellipse at 40% 30%, rgba(139, 92, 246, 0.44) 0 17%, rgba(139, 92, 246, 0.18) 33%, transparent 56%),
        radial-gradient(ellipse at 58% 48%, rgba(236, 72, 153, 0.48) 0 20%, rgba(236, 72, 153, 0.19) 36%, transparent 58%),
        radial-gradient(ellipse at 78% 25%, rgba(217, 70, 239, 0.42) 0 16%, rgba(217, 70, 239, 0.17) 32%, transparent 55%),
        radial-gradient(ellipse at 74% 78%, rgba(134, 239, 172, 0.4) 0 18%, rgba(134, 239, 172, 0.15) 34%, transparent 57%),
        radial-gradient(ellipse at 33% 76%, rgba(253, 224, 71, 0.32) 0 15%, rgba(253, 224, 71, 0.12) 30%, transparent 53%),
        linear-gradient(118deg,
          rgba(94, 234, 212, 0.34),
          rgba(147, 197, 253, 0.3) 28%,
          rgba(249, 168, 212, 0.34) 52%,
          rgba(216, 180, 254, 0.35) 75%,
          rgba(103, 232, 249, 0.31)
        );
      filter: blur(12px) saturate(1.28) brightness(1.1);
    }

    .mini-visual-wrap.streak-40 .streak-smoke::before {
      background:
        radial-gradient(ellipse at 30% 34%, rgba(255, 255, 255, 0.25) 0 8%, transparent 24%),
        radial-gradient(ellipse at 70% 68%, rgba(255, 255, 255, 0.22) 0 8%, transparent 25%);
      filter: blur(5px);
      opacity: 0.58;
    }

    .mini-visual-wrap.streak-40 .streak-smoke::after {
      background:
        radial-gradient(ellipse at 54% 48%, rgba(255, 255, 255, 0.18) 0 18%, transparent 42%);
      filter: blur(6px);
      opacity: 0.46;
    }

    .mini-visual-wrap.streak-20 .streak-smoke {
      inset: -13.3px;
    }

    .mini-visual-wrap.streak-25 .streak-smoke {
      inset: -14.6px;
    }

    .mini-visual-wrap.streak-30 .streak-smoke {
      inset: -15.9px;
    }

    .mini-visual-wrap.streak-35 .streak-smoke {
      inset: -17.2px;
    }

    .mini-visual-wrap.streak-40 .streak-smoke {
      inset: calc(-18.5px - var(--streak-extra, 0px));
    }

    .mini-visual-wrap.streak-20 .streak-smoke.secondary {
      inset: -17.3px;
    }

    .mini-visual-wrap.streak-25 .streak-smoke.secondary {
      inset: -18.6px;
    }

    .mini-visual-wrap.streak-30 .streak-smoke.secondary {
      inset: -19.9px;
    }

    .mini-visual-wrap.streak-35 .streak-smoke.secondary {
      inset: -21.2px;
    }

    .mini-visual-wrap.streak-40 .streak-smoke.secondary {
      inset: calc(-22.5px - var(--streak-extra, 0px));
    }

    @keyframes streakInkDrift {
      0% {
        opacity: 0.44;
        border-radius: 45% 55% 57% 43% / 44% 52% 48% 56%;
        transform: translate3d(0, 0, 0) scale(calc(0.98 + var(--streak-wobble, 0))) rotate(0deg);
      }

      16% {
        opacity: 0.44;
        transform: translate3d(-1px, 1px, 0) scale(calc(1.01 + var(--streak-wobble, 0))) rotate(58deg);
      }

      42% {
        border-radius: 58% 42% 47% 53% / 54% 41% 59% 46%;
        opacity: 0.44;
        transform: translate3d(2px, -2px, 0) scale(calc(1.04 + var(--streak-wobble, 0))) rotate(151deg);
      }

      74% {
        border-radius: 51% 49% 54% 46% / 48% 55% 45% 52%;
        opacity: 0.44;
        transform: translate3d(-2px, -2px, 0) scale(calc(1.02 + var(--streak-wobble, 0))) rotate(266deg);
      }

      100% {
        opacity: 0.44;
        border-radius: 45% 55% 57% 43% / 44% 52% 48% 56%;
        transform: translate3d(0, 0, 0) scale(calc(0.98 + var(--streak-wobble, 0))) rotate(360deg);
      }
    }

    @keyframes streakInkDriftAlt {
      0% {
        opacity: 0.3;
        border-radius: 57% 43% 47% 53% / 52% 58% 42% 48%;
        transform: translate3d(0, 0, 0) scale(calc(0.98 + var(--streak-wobble, 0))) rotate(0deg);
      }

      22% {
        opacity: 0.3;
        transform: translate3d(2px, -1px, 0) scale(calc(1.01 + var(--streak-wobble, 0))) rotate(-79deg);
      }

      55% {
        border-radius: 42% 58% 61% 39% / 45% 52% 48% 55%;
        opacity: 0.3;
        transform: translate3d(-3px, 2px, 0) scale(calc(1.04 + var(--streak-wobble, 0))) rotate(-198deg);
      }

      78% {
        border-radius: 53% 47% 51% 49% / 49% 56% 44% 51%;
        opacity: 0.3;
        transform: translate3d(-1px, 1px, 0) scale(calc(1 + var(--streak-wobble, 0))) rotate(-281deg);
      }

      100% {
        opacity: 0.3;
        border-radius: 57% 43% 47% 53% / 52% 58% 42% 48%;
        transform: translate3d(0, 0, 0) scale(calc(0.98 + var(--streak-wobble, 0))) rotate(-360deg);
      }
    }

    @keyframes streakInkVein {
      0%, 100% {
        border-radius: 43% 57% 61% 39% / 52% 45% 55% 48%;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(calc(0.96 + var(--streak-wobble, 0)));
      }

      38% {
        border-radius: 59% 41% 46% 54% / 43% 56% 44% 57%;
        transform: translate3d(1px, -1px, 0) rotate(8deg) scale(calc(1.04 + var(--streak-wobble, 0)));
      }

      70% {
        border-radius: 48% 52% 42% 58% / 58% 39% 61% 42%;
        transform: translate3d(-1px, 1px, 0) rotate(14deg) scale(calc(1.06 + var(--streak-wobble, 0)));
      }
    }

    .mini-card .section-desc {
      max-width: 260px;
      margin-bottom: 24px;
    }

    .mini-card-actions {
      margin-top: auto;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .mini-stat {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-top: 10px;
    }

    .practice-panel,
    .wrong-panel {
      margin-top: 18px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .practice-panel:not(.hidden),
    .wrong-panel:not(.hidden),
    .topic-panel:not(.hidden),
    .review-panel:not(.hidden),
    .bookmark-panel:not(.hidden),
    .quiz-shell:not(.hidden) {
      animation: rise 0.22s ease both;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .stat-card {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 12px;
      min-height: 76px;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .stat-card:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
    }

    .stat-card-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-card-value {
      color: var(--text);
      font-size: 18px;
      font-weight: 750;
      line-height: 1.2;
      letter-spacing: -0.03em;
    }

    .leaderboard-board {
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: visible;
    }

    .leaderboard-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 14px;
    }

    .leaderboard-tab {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--muted);
      border-radius: 999px;
      padding: 9px 13px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .leaderboard-tab.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #ffffff;
    }

    .leaderboard-tab:active {
      transform: scale(0.98);
    }

    .leaderboard-podium {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
      overflow: visible;
    }

    .leaderboard-card,
    .leaderboard-row {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: var(--radius-md);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .leaderboard-card {
      position: relative;
      min-height: 138px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      isolation: isolate;
      overflow: hidden;
    }

    .leaderboard-card.rank-1 {
      min-height: 164px;
      border-color: #cbd5e1;
      background: #ffffff;
      box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.06),
        0 0 14px rgba(250, 204, 21, 0.065),
        0 12px 26px rgba(15, 23, 42, 0.055);
    }

    .leaderboard-card.rank-2 {
      min-height: 148px;
    }

    .leaderboard-card.rank-3 {
      min-height: 138px;
    }

    .leaderboard-medal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      color: var(--text);
      font-size: 20px;
      font-weight: 1000;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .leaderboard-card.rank-1 .leaderboard-medal {
      width: 48px;
      height: 48px;
      font-size: 22px;
      background: #fefce8;
      border-color: #fde68a;
    }

    .leaderboard-card.rank-2 .leaderboard-medal {
      background: #f8fafc;
    }

    .leaderboard-card.rank-3 .leaderboard-medal {
      background: #fff7ed;
      border-color: #fed7aa;
    }

    .leaderboard-person {
      color: var(--text);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.35;
      word-break: keep-all;
    }

    .leaderboard-score {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
    }

    .leaderboard-best-streak {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      color: var(--muted);
      font-weight: 1000;
      padding: 1px 3px;
    }

    .leaderboard-best-streak .leaderboard-score-label {
      position: relative;
      z-index: 2;
      letter-spacing: -0.06em;
    }

    .leaderboard-score-smoke {
      position: absolute;
      inset: -10px -14px;
      z-index: 1;
      border-radius: 999px;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 44%, rgba(var(--streak-rgb, 139, 92, 246), 0.34) 0 6%, rgba(var(--streak-rgb, 139, 92, 246), 0.12) 12%, transparent 25%),
        radial-gradient(ellipse at 80% 36%, rgba(var(--streak-rgb, 139, 92, 246), 0.28) 0 5%, rgba(var(--streak-rgb, 139, 92, 246), 0.11) 13%, transparent 26%),
        radial-gradient(ellipse at 62% 82%, rgba(var(--streak-rgb, 139, 92, 246), 0.26) 0 7%, rgba(var(--streak-rgb, 139, 92, 246), 0.1) 14%, transparent 28%);
      filter: blur(8px) saturate(1.1);
      opacity: 0.42;
      animation: streakInkDrift 18s linear infinite;
      display: none;
    }

    .leaderboard-score-smoke.secondary {
      inset: -13px -18px;
      opacity: 0.28;
      animation-name: streakInkDriftAlt;
      animation-duration: 24s;
      animation-delay: -1.8s;
    }

    .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke {
      display: block;
    }

    .leaderboard-best-streak.streak-5 {
      --streak-rgb: 20, 184, 166;
    }

    .leaderboard-best-streak.streak-10 {
      --streak-rgb: 59, 130, 246;
    }

    .leaderboard-best-streak.streak-15 {
      --streak-rgb: 139, 92, 246;
    }

    .leaderboard-best-streak.streak-20 {
      --streak-rgb: 225, 29, 72;
    }

    .leaderboard-best-streak.streak-25 {
      --streak-rgb: 245, 158, 11;
    }

    .leaderboard-best-streak.streak-30 {
      --streak-rgb: 34, 197, 94;
    }

    .leaderboard-best-streak.streak-35 {
      --streak-rgb: 124, 58, 237;
    }

    .leaderboard-best-streak.streak-40 {
      --streak-rgb: 139, 92, 246;
    }

    .leaderboard-best-streak.streak-5 .leaderboard-score-label,
    .leaderboard-best-streak.streak-10 .leaderboard-score-label,
    .leaderboard-best-streak.streak-15 .leaderboard-score-label {
      color: rgb(var(--streak-rgb));
      text-shadow:
        0 0 8px rgba(var(--streak-rgb), 0.18),
        0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .leaderboard-best-streak.streak-20 .leaderboard-score-label,
    .leaderboard-best-streak.streak-25 .leaderboard-score-label,
    .leaderboard-best-streak.streak-30 .leaderboard-score-label,
    .leaderboard-best-streak.streak-35 .leaderboard-score-label,
    .leaderboard-best-streak.streak-40 .leaderboard-score-label {
      color: rgb(var(--streak-rgb));
      font-size: 14px;
      text-shadow:
        0 0 10px rgba(var(--streak-rgb), 0.23),
        0 0 18px rgba(var(--streak-rgb), 0.12);
    }

    .leaderboard-best-streak.streak-25 .leaderboard-score-label,
    .leaderboard-best-streak.streak-30 .leaderboard-score-label,
    .leaderboard-best-streak.streak-35 .leaderboard-score-label,
    .leaderboard-best-streak.streak-40 .leaderboard-score-label {
      font-size: 15px;
      transform: scale(1.04);
      text-shadow:
        0 0 10px rgba(var(--streak-rgb), 0.34),
        0 0 22px rgba(var(--streak-rgb), 0.18),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .leaderboard-best-streak.streak-30 .leaderboard-score-label {
      font-size: 15.5px;
      text-shadow:
        0 0 12px rgba(var(--streak-rgb), 0.4),
        0 0 26px rgba(var(--streak-rgb), 0.22),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .leaderboard-best-streak.streak-35 .leaderboard-score-label {
      font-size: 16px;
      text-shadow:
        0 0 14px rgba(var(--streak-rgb), 0.46),
        0 0 30px rgba(var(--streak-rgb), 0.27),
        0 0 42px rgba(var(--streak-rgb), 0.14),
        0 2px 0 rgba(255, 255, 255, 0.95);
    }

    .leaderboard-best-streak.streak-40 .leaderboard-score-label {
      color: #8b5cf6;
      font-size: 16.5px;
      text-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 16px rgba(244, 114, 182, 0.32),
        0 0 24px rgba(125, 211, 252, 0.3),
        0 0 34px rgba(196, 181, 253, 0.28),
        0 2px 0 rgba(255, 255, 255, 0.96);
    }

    .leaderboard-best-streak.streak-25 .leaderboard-score-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(245, 158, 11, 0.42) 0 7%, rgba(245, 158, 11, 0.16) 14%, transparent 28%),
        radial-gradient(ellipse at 80% 36%, rgba(217, 119, 6, 0.34) 0 6%, rgba(217, 119, 6, 0.13) 15%, transparent 29%),
        radial-gradient(ellipse at 62% 82%, rgba(251, 191, 36, 0.34) 0 8%, rgba(251, 191, 36, 0.13) 16%, transparent 30%);
      filter: blur(8px) saturate(1.26);
    }

    .leaderboard-best-streak.streak-30 .leaderboard-score-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(34, 197, 94, 0.5) 0 10%, rgba(34, 197, 94, 0.2) 18%, transparent 35%),
        radial-gradient(ellipse at 80% 36%, rgba(22, 163, 74, 0.42) 0 9%, rgba(22, 163, 74, 0.16) 18%, transparent 34%),
        radial-gradient(ellipse at 62% 82%, rgba(74, 222, 128, 0.4) 0 10%, rgba(74, 222, 128, 0.16) 19%, transparent 35%),
        radial-gradient(ellipse at 24% 30%, rgba(250, 204, 21, 0.28) 0 5%, rgba(250, 204, 21, 0.12) 11%, transparent 23%),
        radial-gradient(ellipse at 70% 58%, rgba(253, 224, 71, 0.26) 0 5%, rgba(253, 224, 71, 0.11) 12%, transparent 24%),
        radial-gradient(ellipse at 48% 76%, rgba(254, 240, 138, 0.18) 0 4%, transparent 20%);
      filter: blur(8.4px) saturate(1.42) brightness(1.03);
    }

    .leaderboard-best-streak.streak-35 .leaderboard-score-smoke {
      background:
        radial-gradient(ellipse at 18% 44%, rgba(109, 40, 217, 0.5) 0 9%, rgba(109, 40, 217, 0.2) 17%, transparent 32%),
        radial-gradient(ellipse at 80% 36%, rgba(2, 132, 199, 0.42) 0 7%, rgba(2, 132, 199, 0.16) 16%, transparent 31%),
        radial-gradient(ellipse at 62% 82%, rgba(168, 85, 247, 0.34) 0 8%, rgba(168, 85, 247, 0.13) 17%, transparent 33%),
        radial-gradient(ellipse at 32% 75%, rgba(67, 56, 202, 0.38) 0 7%, rgba(67, 56, 202, 0.15) 16%, transparent 31%);
      filter: blur(8.4px) saturate(1.62) brightness(0.98);
    }

    .leaderboard-best-streak.streak-40 .leaderboard-score-smoke {
      background:
        radial-gradient(ellipse at 16% 50%, rgba(45, 212, 191, 0.48) 0 18%, rgba(45, 212, 191, 0.19) 34%, transparent 57%),
        radial-gradient(ellipse at 40% 30%, rgba(139, 92, 246, 0.44) 0 17%, rgba(139, 92, 246, 0.18) 33%, transparent 56%),
        radial-gradient(ellipse at 58% 48%, rgba(236, 72, 153, 0.48) 0 20%, rgba(236, 72, 153, 0.19) 36%, transparent 58%),
        radial-gradient(ellipse at 78% 25%, rgba(217, 70, 239, 0.42) 0 16%, rgba(217, 70, 239, 0.17) 32%, transparent 55%),
        radial-gradient(ellipse at 74% 78%, rgba(134, 239, 172, 0.4) 0 18%, rgba(134, 239, 172, 0.15) 34%, transparent 57%);
      filter: blur(9.5px) saturate(1.28) brightness(1.1);
    }

    .leaderboard-best-streak.streak-20 .leaderboard-score-smoke {
      inset: -11px -15px;
    }

    .leaderboard-best-streak.streak-25 .leaderboard-score-smoke {
      inset: -12px -16px;
    }

    .leaderboard-best-streak.streak-30 .leaderboard-score-smoke {
      inset: -13px -17px;
    }

    .leaderboard-best-streak.streak-35 .leaderboard-score-smoke {
      inset: -14px -18px;
    }

    .leaderboard-best-streak.streak-40 .leaderboard-score-smoke {
      inset:
        calc(-15px - var(--streak-extra, 0px))
        calc(-20px - var(--streak-extra, 0px));
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .leaderboard-row {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      overflow: hidden;
    }

    .leaderboard-rank {
      color: var(--muted);
      font-size: 13px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .quiz-card {
      padding: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .quiz-card.fade {
      opacity: 0;
      transform: translateY(8px);
    }

    .quiz-card.correct-pop,
    .practice-panel.correct-pop,
    .topic-panel.correct-pop,
    .review-panel.correct-pop {
      animation: correctPop 0.22s ease both;
    }

    .quiz-card.wrong-pop,
    .practice-panel.wrong-pop,
    .topic-panel.wrong-pop,
    .review-panel.wrong-pop {
      animation: wrongPop 0.34s ease both;
    }

    .status-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .progress-text {
      color: var(--text-soft);
      font-weight: 900;
      font-size: 14px;
    }

    .mode-badge {
      color: var(--muted);
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .mode-badge.practice {
      color: var(--warning);
      border-color: #fde68a;
      background: var(--warning-bg);
    }

    .question-box,
    .exam-question-box {
      background: var(--surface-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 20px 18px;
      margin-bottom: 16px;
    }

    .question-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .question,
    .exam-question {
      margin: 0;
      font-size: 19px;
      line-height: 1.65;
      font-weight: 800;
      word-break: keep-all;
      white-space: pre-wrap;
      color: var(--text);
    }

    .answer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }

    .answer-btn {
      min-height: 58px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #ffffff;
      color: var(--text);
      cursor: pointer;
      font-size: 27px;
      font-weight: 950;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.045);
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

    .answer-btn.o,
    .answer-btn.x {
      background: #ffffff;
      color: var(--text);
    }

    .answer-btn:hover {
      border-color: var(--line-strong);
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 14px 26px rgba(15, 23, 42, 0.075);
    }

    .answer-btn:active {
      transform: translateY(1px) scale(0.985);
      box-shadow: 0 5px 12px rgba(15, 23, 42, 0.055);
    }

    .answer-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .answer-btn.selected {
      border-color: #94a3b8;
      background: var(--surface-soft);
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
    }

    .answer-btn.correct-choice {
      border-color: var(--correct-line);
      background: var(--correct-bg);
      color: var(--correct);
      box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08), 0 10px 20px rgba(22, 163, 74, 0.08);
    }

    .answer-btn.wrong-choice {
      border-color: var(--wrong-line);
      background: var(--wrong-bg);
      color: var(--wrong);
      box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.08), 0 10px 20px rgba(185, 28, 28, 0.07);
    }

    .answer-grid.shake {
      animation: wrongShake 0.38s ease;
    }

    .feedback,
    .exam-feedback {
      display: none;
      border-radius: var(--radius-md);
      padding: 16px;
      margin-top: 8px;
      border: 1px solid var(--line);
    }

    .feedback.show,
    .exam-feedback.show {
      display: block;
      animation: rise 0.25s ease both;
    }

    .feedback.correct,
    .exam-feedback.correct {
      background: var(--correct-bg);
      border-color: var(--correct-line);
    }

    .feedback.wrong,
    .exam-feedback.wrong {
      background: var(--wrong-bg);
      border-color: var(--wrong-line);
    }

    .feedback-title,
    .exam-feedback-title {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 12px;
      line-height: 1.55;
      color: var(--text);
    }

    .explanation-title,
    .exam-explanation-title {
      margin: 0 0 8px;
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 900;
    }

    .explanation,
    .exam-explanation {
      margin: 0;
      color: var(--text-soft);
      line-height: 1.72;
      font-size: 14px;
      word-break: keep-all;
      white-space: pre-wrap;
    }

    .explanation-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 2px 0 10px;
    }

    .explanation-toggle-label {
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 900;
    }

    .explanation-toggle {
      width: 42px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: #d7d7d7;
      padding: 2px;
      cursor: pointer;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
      transition: background 0.18s ease, box-shadow 0.18s ease;
      flex: 0 0 auto;
    }

    .explanation-toggle::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      left: 2px;
      top: 2px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 4px 9px rgba(15, 23, 42, 0.22);
      transition: transform 0.18s ease;
    }

    .explanation-toggle.active {
      background: #3f4650;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18);
    }

    .explanation-toggle.active::before {
      transform: translateX(18px);
    }

    .explanation-hidden {
      display: none !important;
    }

    .explanation img,
    .exam-explanation img,
    .wrong-explanation img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 10px 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
    }

    .explanation table,
    .exam-explanation table,
    .wrong-explanation table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      overflow: hidden;
      border-radius: 10px;
      font-size: 13px;
      white-space: normal;
    }

    .explanation th,
    .explanation td,
    .exam-explanation th,
    .exam-explanation td,
    .wrong-explanation th,
    .wrong-explanation td {
      border: 1px solid var(--line);
      padding: 8px 9px;
      text-align: left;
      vertical-align: top;
    }

    .explanation th,
    .exam-explanation th,
    .wrong-explanation th {
      background: #f8fafc;
      color: var(--text);
      font-weight: 900;
    }

    .explanation u,
    .exam-explanation u,
    .wrong-explanation u {
      text-underline-offset: 3px;
    }

    .stat-box {
      display: none;
      margin-top: 14px;
      padding: 14px;
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }

    .stat-box.show {
      display: block;
    }

    .stat-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .stat-percent {
      color: var(--text-soft);
      white-space: nowrap;
    }

    .bar {
      height: 10px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: hidden;
    }

    .bar-fill {
      width: 0%;
      height: 100%;
      background: #64748b;
      border-radius: 999px;
      transition: width 0.45s ease;
    }

    .next-btn,
    .restart-btn,
    .exam-next-btn {
      display: none;
      width: 100%;
      margin-top: 14px;
      border: 0;
      border-radius: var(--radius-md);
      background: var(--navy);
      color: #ffffff;
      padding: 15px;
      font-size: 15px;
      font-weight: 950;
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
    }

    .next-btn:hover,
    .restart-btn:hover,
    .exam-next-btn:hover {
      filter: brightness(1.04);
      transform: translateY(-1px);
      box-shadow: 0 15px 30px rgba(15, 23, 42, 0.18);
    }

    .next-btn.show,
    .restart-btn.show,
    .exam-next-btn.show {
      display: block;
    }

    .restart-btn {
      border: 1px solid var(--line);
      background: #f1f5f9;
      color: var(--text-soft);
      box-shadow: 0 7px 16px rgba(15, 23, 42, 0.045);
    }

    .restart-btn:hover {
      filter: none;
      color: var(--text);
      background: #e2e8f0;
      box-shadow: 0 9px 18px rgba(15, 23, 42, 0.07);
    }

    .restart-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.045);
    }

    .next-btn:active,
    .exam-next-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
    }

    .empty,
    .error {
      padding: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      color: var(--muted);
      line-height: 1.7;
      font-size: 14px;
    }

    .error {
      border-color: #fecaca;
      color: var(--wrong);
      background: var(--wrong-bg);
    }

    .final {
      display: none;
    }

    .final.show {
      display: block;
      animation: rise 0.25s ease both;
    }

    .score-panel {
      text-align: center;
      padding: 12px 8px 20px;
    }

    .score-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .score-main {
      font-size: 31px;
      font-weight: 950;
      margin-bottom: 8px;
      color: var(--text);
    }

    .score-sub {
      color: var(--muted);
      line-height: 1.65;
      font-size: 15px;
    }

    .result-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 18px;
    }

    .result-item {
      padding: 15px;
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: var(--radius-md);
    }

    .result-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
    }

    .result-question {
      font-size: 14px;
      line-height: 1.62;
      color: var(--text);
      margin-bottom: 12px;
      word-break: keep-all;
      white-space: pre-wrap;
    }

    .exam-meta {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}

    .multi-target-box {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 14px 16px 12px;
      margin-bottom: 14px;
    }

    .multi-target-box .question-label {
      margin-bottom: 6px;
    }

    .multi-target-title {
      color: var(--text);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.03em;
      line-height: 1.35;
      margin-bottom: 4px;
      word-break: keep-all;
      white-space: normal;
    }

    .review-panel .multi-target-title {
      white-space: pre-line;
      font-size: clamp(16px, 4.6vw, 20px);
      line-height: 1.78;
      letter-spacing: -0.02em;
      overflow-wrap: anywhere;
    }

    .review-panel .multi-target-box {
      padding: 13px 14px;
    }

    .multi-target-title:last-child {
      margin-bottom: 0;
    }

    .multi-target-sub {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .multi-progress {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .multi-chip {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--muted);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    .multi-chip.active {
      border-color: #94a3b8;
      color: var(--text);
      background: var(--surface-soft);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .multi-chip.done {
      color: var(--text-soft);
      border-color: var(--line-strong);
      background: var(--surface-muted);
    }

    .multi-chip-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--line-strong);
      flex: 0 0 auto;
    }

    .multi-chip.active .multi-chip-dot {
      background: var(--point-dark);
    }

    .multi-chip.done .multi-chip-dot {
      background: var(--muted);
    }

    .saved-target-chip {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .saved-target-chip.correct {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    .saved-target-chip.wrong {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .saved-target-label {
      color: inherit;
      opacity: 0.84;
    }

    .saved-target-choice {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: inherit;
      font-size: 12px;
      font-weight: 1000;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    }

    .saved-target-chip.correct .saved-target-choice {
      background: #dcfce7;
    }

    .saved-target-chip.wrong .saved-target-choice {
      background: #fee2e2;
    }

    .multi-bottom-actions {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }

    .multi-back-btn {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #ffffff;
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .multi-back-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .multi-result-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 14px 0;
    }

    .multi-result-item {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: #ffffff;
    }

    .multi-result-item.correct {
      border-color: var(--correct-line);
      background: var(--correct-bg);
    }

    .multi-result-item.wrong {
      border-color: var(--wrong-line);
      background: var(--wrong-bg);
    }

    .multi-result-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .multi-result-detail {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }


    .exam-cycle-count {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      text-align: right;
      margin: -4px 0 16px;
      font-variant-numeric: tabular-nums;
    }


    .question-box,
    .exam-question-box {
      position: relative;
    }

    .feature-page-active .question-box,
    body.exam-tab-active .exam-question-box {
      border-radius: 26px;
      border-color: #dbe3ee;
      background:
        radial-gradient(circle at 96% 0%, rgba(148, 163, 184, 0.12), transparent 28%),
        #ffffff;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    }

    body.exam-tab-active .exam-question-box {
      min-height: clamp(360px, 54vh, 620px);
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: clamp(20px, 4vw, 38px) 2px 24px;
      box-shadow: none;
    }

    .feature-page-active .question,
    body.exam-tab-active .exam-question {
      font-size: clamp(20px, 5vw, 28px);
      line-height: 1.55;
      letter-spacing: -0.035em;
    }

    body.exam-tab-active .exam-question {
      max-width: 920px;
      margin: 0;
      font-size: clamp(25px, 5.4vw, 44px);
      line-height: 1.48;
      letter-spacing: -0.045em;
    }

    body.exam-tab-active .exam-question-box .question-label {
      margin-bottom: 22px;
      color: #64748b;
      font-size: 14px;
      letter-spacing: 0.01em;
    }

    body.exam-tab-active .exam-question-box .inline-cycle-count {
      right: 0;
      bottom: 8px;
      color: #64748b;
    }

    .feature-page-active .answer-grid:not(.answered) {
      border-radius: 24px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    }

    .inline-cycle-count {
      position: absolute;
      right: 16px;
      bottom: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .topic-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .topic-card {
      position: relative;
      min-width: 0;
    }

    .feature-page-active .topic-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .feature-page-active .topic-card {
      min-height: 132px;
    }

    .more-list-btn {
      width: 100%;
      margin-top: 12px;
      border: 1px solid var(--line);
      background: #f8fafc;
      color: var(--text-soft);
      border-radius: var(--radius-md);
      padding: 12px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    }

    .more-list-btn:hover {
      background: #f1f5f9;
      border-color: var(--line-strong);
      transform: translateY(-1px);
    }

    .topic-btn {
      position: relative;
      display: block;
      width: 100%;
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: var(--radius-md);
      padding: 15px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 7px 16px rgba(15, 23, 42, 0.035);
      transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .feature-page-active .topic-btn {
      height: 100%;
      min-height: 132px;
      border-radius: 24px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.9), #ffffff);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.052);
    }

    .topic-course-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 36px;
    }

    .topic-course-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 28px;
      border-radius: 999px;
      background: #f1f5f9;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .topic-progress-track {
      height: 8px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
      margin: 16px 0 12px;
    }

    .topic-progress-fill {
      height: 100%;
      width: var(--progress, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, #64748b, #111827);
    }

    .topic-course-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .topic-start-chip {
      color: #111827;
      font-weight: 950;
    }

    .topic-roadmap {
      position: relative;
      display: grid;
      gap: 16px;
      padding-left: 22px;
    }

    .topic-roadmap::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 18px;
      bottom: 18px;
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, #111827, #cbd5e1);
      opacity: 0.18;
    }

    .topic-roadmap .topic-card::after {
      content: "";
      position: absolute;
      left: -20px;
      top: 34px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: #ffffff;
      border: 4px solid #111827;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    }

    .topic-achievement-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    .topic-risk-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 950;
    }

    .topic-risk-badge.danger {
      background: #fef2f2;
      color: #b91c1c;
    }

    .topic-risk-badge.warn {
      background: #fffbeb;
      color: #a16207;
    }

    .topic-risk-badge.safe {
      background: #ecfdf5;
      color: #047857;
    }

    .topic-progress-fill {
      transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wrong-insight-board {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 12px;
      margin: 16px 0;
    }

    .weakness-card,
    .wrong-filter-dock {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
      padding: 16px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    }

    .weakness-title {
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
      margin-bottom: 12px;
    }

    .weakness-row {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr) 46px;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .weakness-donut {
      position: relative;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: conic-gradient(#111827 var(--slice, 0%), #e2e8f0 0);
      display: grid;
      place-items: center;
      color: #111827;
      font-size: 12px;
      font-weight: 950;
    }

    @media (max-width: 760px) {
      .wrong-insight-board {
        grid-template-columns: 1fr;
      }

      .exam-dock-feedback {
        grid-template-columns: 1fr;
      }
    }

    .weakness-donut::after {
      content: "";
      width: 31px;
      height: 31px;
      border-radius: 50%;
      background: #ffffff;
      position: absolute;
    }

    .weakness-donut span {
      position: relative;
      z-index: 1;
    }

    .weakness-name {
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
    }

    .weakness-count {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      margin-top: 3px;
    }

    .wrong-filter-dock {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .wrong-filter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .wrong-quickfire-btn {
      position: sticky;
      bottom: 104px;
      z-index: 15;
      width: 100%;
      border: 0;
      border-radius: 24px;
      background: #111827;
      color: #ffffff;
      padding: 16px;
      font-size: 15px;
      font-weight: 950;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
      cursor: pointer;
    }

    .feature-page-active .topic-btn.active .topic-progress-fill {
      background: linear-gradient(90deg, #111827, #475569);
    }

    .review-mode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .review-mode-card {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
      padding: 18px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.052);
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .review-mode-card:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.075);
    }

    .review-mode-card.active {
      border-color: #94a3b8;
      background: #f8fafc;
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16), 0 14px 32px rgba(15, 23, 42, 0.065);
    }

    .review-mode-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      margin-bottom: 8px;
    }

    .review-mode-title {
      color: var(--text);
      font-size: 19px;
      font-weight: 950;
      letter-spacing: -0.035em;
    }

    .review-mode-copy {
      margin-top: 8px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.55;
    }

    .review-mode-action {
      display: inline-flex;
      margin-top: 14px;
      color: #111827;
      font-size: 13px;
      font-weight: 950;
    }

    .learning-stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background:
        radial-gradient(circle at 100% 0%, rgba(148, 163, 184, 0.12), transparent 28%),
        #ffffff;
      padding: 16px;
      margin-bottom: 14px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.052);
    }

    .learning-stage-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .learning-stage-title {
      color: var(--text);
      font-size: 20px;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    .learning-stage-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 9px;
    }

    .learning-stage-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #f1f5f9;
      color: var(--text-soft);
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 900;
    }

    .learning-stage-count {
      min-width: 72px;
      height: 72px;
      border-radius: 22px;
      background: #111827;
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    }

    body.exam-tab-active .learning-stage {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0 2px 18px;
      margin: 0 0 18px;
      box-shadow: none;
    }

    body.exam-tab-active .learning-stage-kicker,
    body.exam-tab-active .learning-stage-title {
      display: none;
    }

    body.exam-tab-active .learning-stage-meta {
      grid-column: 1 / 2;
      margin: 0;
      gap: 7px;
      min-width: 0;
    }

    body.exam-tab-active .learning-stage-chip {
      max-width: min(48vw, 320px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 7px 10px;
      background: #f8fafc;
      border: 1px solid rgba(226, 232, 240, 0.95);
      color: #475569;
    }

    body.exam-tab-active .learning-stage-count {
      grid-column: 3 / 4;
      min-width: auto;
      width: auto;
      height: auto;
      border-radius: 999px;
      background: transparent;
      color: #111827;
      padding: 4px 0;
      font-size: clamp(22px, 5vw, 34px);
      box-shadow: none;
    }

    body.exam-tab-active .learning-stage-count::first-letter {
      color: var(--accent);
    }

    .feature-page-active .review-panel:not(.hidden),
    .feature-page-active .topic-panel:not(.hidden) {
      display: grid;
      gap: 12px;
    }

    .passage-library-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .passage-library-card {
      width: 100%;
      min-height: 120px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background:
        radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.11), transparent 30%),
        #ffffff;
      padding: 18px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.052);
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .passage-library-card:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.075);
    }

    .passage-library-meta {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .qna-board-shell {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.052);
    }

    .qna-board-head {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) 42px;
      gap: 10px;
      padding: 12px 16px;
      background: #f8fafc;
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      border-bottom: 1px solid var(--line);
    }

    body.feature-page-active .topic-btn,
    body.feature-page-active .passage-library-card,
    body.feature-page-active .review-mode-card {
      border-radius: 28px;
      border-color: rgba(203, 213, 225, 0.92);
      background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 16px 40px rgba(15, 23, 42, 0.075);
    }

    body.feature-page-active .topic-btn:hover,
    body.feature-page-active .passage-library-card:hover,
    body.feature-page-active .review-mode-card:hover {
      transform: translateY(-3px);
      border-color: #94a3b8;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 22px 52px rgba(15, 23, 42, 0.12);
    }

    body.feature-page-active .topic-btn.active,
    body.feature-page-active .review-mode-card.active {
      border-color: #111827;
      background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      box-shadow:
        0 0 0 4px rgba(15, 23, 42, 0.08),
        0 22px 52px rgba(15, 23, 42, 0.12);
    }

    body.feature-page-active .topic-card::before,
    body.feature-page-active .passage-library-card::before,
    body.feature-page-active .review-mode-card::before {
      content: "";
      display: block;
      width: 34px;
      height: 4px;
      border-radius: 999px;
      background: #111827;
      margin-bottom: 16px;
      opacity: 0.82;
    }

    body.feature-page-active .topic-course-badge {
      background: #111827;
      color: #ffffff;
    }

    body.feature-page-active .topic-progress-track {
      height: 10px;
      background: #e2e8f0;
      margin: 20px 0 14px;
    }

    body.feature-page-active .topic-progress-fill {
      background:
        linear-gradient(90deg, #111827 0%, #475569 100%);
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
    }

    body.feature-page-active .review-mode-title,
    body.feature-page-active .topic-name,
    body.feature-page-active .passage-thinker {
      font-size: clamp(19px, 4vw, 24px);
      line-height: 1.18;
    }

    body.feature-page-active .review-mode-copy,
    body.feature-page-active .topic-meta,
    body.feature-page-active .passage-library-meta {
      font-size: 13px;
      line-height: 1.6;
    }

    body.feature-page-active .learning-stage {
      border: 0;
      border-radius: 30px;
      background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      padding: 20px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 18px 46px rgba(15, 23, 42, 0.095);
    }

    body.feature-page-active .learning-stage-kicker {
      color: #475569;
      letter-spacing: 0.14em;
    }

    body.feature-page-active .learning-stage-title {
      font-size: clamp(22px, 5vw, 32px);
    }

    body.feature-page-active .learning-stage-chip {
      background: #e2e8f0;
      color: #334155;
    }

    body.feature-page-active .question-box,
    body.exam-tab-active .exam-question-box {
      border: 0;
      border-radius: 32px;
      background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
      padding: clamp(22px, 5vw, 36px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 22px 58px rgba(15, 23, 42, 0.105);
    }

    body.feature-page-active .question,
    body.exam-tab-active .exam-question {
      font-size: clamp(23px, 5vw, 34px);
      font-weight: 950;
      line-height: 1.5;
    }

    body.feature-page-active .feedback.show,
    body.exam-tab-active .exam-feedback.show {
      border: 0;
      border-radius: 28px;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
    }

    body.feature-page-active .qna-board-shell {
      border: 0;
      border-radius: 30px;
      box-shadow: 0 22px 58px rgba(15, 23, 42, 0.095);
    }

    body.feature-page-active .qna-board-head {
      background: #111827;
      color: rgba(255, 255, 255, 0.78);
      border-bottom: 0;
      padding: 14px 18px;
    }

    body.feature-page-active .qna-item {
      min-height: 62px;
      padding: 16px 18px;
    }

    body.feature-page-active .qna-item:nth-child(odd) {
      background: #fbfcfe;
    }

    .topic-btn:hover {
      background: #ffffff;
      border-color: var(--line-strong);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }

    .topic-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    }

    .topic-btn.active {
      border-color: #94a3b8;
      background: #f8fafc;
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16), 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .topic-btn.active .topic-name {
      color: #111827;
    }

    .topic-btn:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14), 0 10px 22px rgba(15, 23, 42, 0.06);
    }

    .topic-favorite-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #cbd5e1;
      font-size: 18px;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: transform 0.16s ease, color 0.16s ease, text-shadow 0.16s ease;
    }

    .topic-favorite-btn:hover {
      transform: scale(1.12);
    }

    .topic-favorite-btn.active {
      color: #f59e0b;
      text-shadow: 0 3px 10px rgba(245, 158, 11, 0.24);
    }

    .topic-favorite-btn:active {
      transform: scale(0.9);
    }

    .topic-name {
      color: var(--text);
      font-size: 15px;
      font-weight: 950;
      margin-bottom: 8px;
      padding-right: 38px;
    }

    .feature-page-active .topic-name,
    .feature-page-active .passage-thinker {
      font-size: 18px;
      letter-spacing: -0.025em;
    }

    .topic-meta {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .topic-panel,
    .review-panel,
    .qna-panel,
    .passage-panel,
    .bookmark-panel {
      margin-top: 18px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .feature-page-active .topic-panel,
    .feature-page-active .review-panel,
    .feature-page-active .qna-panel,
    .feature-page-active .passage-panel {
      border-top: 0;
      padding-top: 0;
    }

    .passage-panel {
      margin-top: 8px;
      padding-top: 10px;
    }

    .qna-form {
      display: grid;
      gap: 10px;
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      padding: 14px;
    }

    .qna-block-title {
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .qna-board {
      background: transparent;
      padding: 0;
    }

    .qna-compose-toggle {
      margin-top: 12px;
      width: 100%;
    }

    .qna-form textarea {
      width: 100%;
      min-height: 96px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #ffffff;
      color: var(--text);
      padding: 14px;
      font: inherit;
      font-size: 14px;
      line-height: 1.65;
      resize: vertical;
      outline: 0;
    }

    .qna-form textarea:focus {
      border-color: var(--line-strong);
      box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.12);
    }

    .bookmark-folder-tools {
      display: grid;
      gap: 10px;
      margin-bottom: 14px;
    }

    .bookmark-folder-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .bookmark-folder-input,
    .bookmark-folder-select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 10px 12px;
      outline: 0;
    }

    .bookmark-folder-input:focus,
    .bookmark-folder-select:focus {
      border-color: var(--line-strong);
      box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.1);
    }

    .bookmark-folder-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      overflow: visible;
      padding-bottom: 2px;
      align-items: center;
    }

    .bookmark-folder-chip,
    .bookmark-folder-open-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--muted);
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      line-height: 1;
    }

    .bookmark-folder-chip.active {
      color: var(--text);
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }

    .bookmark-folder-chip-wrap {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
    }

    .bookmark-folder-chip-wrap.active {
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }

    .bookmark-folder-chip-wrap .bookmark-folder-chip {
      min-height: 30px;
      border: 0;
      border-radius: 999px 0 0 999px;
      background: transparent;
      padding-right: 7px;
    }

    .bookmark-folder-open-btn {
      color: var(--text-soft);
      box-shadow: none;
      flex: 0 0 auto;
    }

    .bookmark-folder-remove {
      width: 30px;
      min-width: 30px;
      height: 30px;
      min-height: 30px;
      margin: 0;
      padding: 0 8px 0 5px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-weight: 1000;
      cursor: pointer;
    }

    .bookmark-folder-row {
      display: grid;
      gap: 6px;
      margin-top: 10px;
    }

    .bookmark-folder-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .bookmark-simple-item {
      position: relative;
      cursor: pointer;
      padding: 16px 44px 16px 16px;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .bookmark-simple-item:hover {
      border-color: var(--line-strong);
      background: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
    }

    .bookmark-simple-question {
      margin-bottom: 0;
      font-size: 15px;
      font-weight: 850;
      line-height: 1.6;
    }

    .bookmark-simple-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      border: 0;
      background: transparent;
      color: #cbd5e1;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: color 0.16s ease, transform 0.16s ease;
    }

    .bookmark-simple-delete:hover {
      color: #64748b;
      transform: scale(1.08);
    }

    .bookmark-save-dialog {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(6px);
    }

    .bookmark-save-card {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
      padding: 18px;
    }

    .bookmark-save-head {
      display: grid;
      gap: 4px;
      margin-bottom: 14px;
    }

    .bookmark-save-title {
      color: var(--text);
      font-size: 17px;
      font-weight: 950;
    }

    .bookmark-save-sub {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .bookmark-save-folders {
      display: grid;
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .bookmark-save-folder-btn {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text);
      padding: 12px 13px;
      text-align: left;
      font: inherit;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .bookmark-save-folder-btn:hover {
      background: var(--surface-soft);
      border-color: var(--line-strong);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .bookmark-save-new {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-top: 12px;
    }

    .bookmark-save-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .qna-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .feature-page-active .qna-list {
      gap: 12px;
    }

    .qna-item {
      width: 100%;
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: var(--radius-md);
      padding: 14px;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: border-color 0.16s ease, background 0.16s ease;
    }

    .feature-page-active .qna-item {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) 42px;
      align-items: center;
      gap: 10px;
      border-radius: 22px;
      padding: 14px 16px;
      box-shadow: none;
      border-width: 0 0 1px 0;
      border-radius: 0;
    }

    .qna-item:hover {
      border-color: var(--line-strong);
      background: #fcfdff;
    }

    .feature-page-active .qna-item:hover {
      transform: none;
      box-shadow: none;
    }

    .passage-thinker {
      color: var(--text);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.5;
    }

    .qna-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .feature-page-active .qna-item-top {
      display: contents;
      margin-bottom: 0;
    }

    .qna-item-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .qna-item-arrow {
      color: var(--muted-light);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    .qna-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 8px;
    }

    .qna-status {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: var(--surface-muted);
      color: var(--text-soft);
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .qna-status.answered {
      background: var(--correct-bg);
      color: var(--correct);
    }

    .qna-question,
    .qna-answer {
      white-space: pre-wrap;
      word-break: keep-all;
      line-height: 1.65;
      font-size: 14px;
    }

    .qna-question {
      color: var(--text);
      font-weight: 800;
    }

    .qna-item .qna-question {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .feature-page-active .qna-item .qna-question {
      font-size: 16px;
      font-weight: 900;
      grid-column: 2;
      grid-row: 1;
    }

    .feature-page-active .qna-item-label {
      grid-column: 1;
    }

    .feature-page-active .qna-status {
      display: none;
    }

    .feature-page-active .qna-item-arrow {
      grid-column: 3;
      justify-self: end;
    }

    .qna-answer {
      margin-top: 10px;
      color: var(--text-soft);
      background: var(--surface-soft);
      border-radius: 12px;
      padding: 12px;
    }

    .qna-detail {
      margin-top: 12px;
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
      padding: 18px;
      animation: rise 0.2s ease both;
    }

    .qna-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
      margin-bottom: 14px;
    }

    .qna-detail-close {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--muted);
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .qna-detail-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.02em;
    }

    .qna-detail-title {
      color: var(--text);
      font-size: 21px;
      font-weight: 950;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: keep-all;
      margin-bottom: 18px;
    }

    .qna-detail-answer {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.75;
      white-space: pre-wrap;
      word-break: keep-all;
    }

    .support-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }

    .tiny-btn {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text-soft);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 5px 12px rgba(15, 23, 42, 0.035);
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .tiny-btn:hover {
      background: #ffffff;
      border-color: var(--line-strong);
      color: var(--text);
      transform: translateY(-1px);
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.055);
    }

    .tiny-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
    }

    .tiny-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .cycle-complete {
      border: 1px solid var(--line);
      background: var(--surface-soft);
      border-radius: var(--radius-md);
      padding: 18px;
      color: var(--text-soft);
      line-height: 1.65;
      font-size: 14px;
    }

    .cycle-complete strong {
      display: block;
      color: var(--text);
      font-size: 17px;
      margin-bottom: 8px;
    }

    .archive-list,
    .wrong-note-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .wrong-item {
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: var(--radius-md);
      padding: 15px;
    }

    .wrong-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .wrong-question {
      color: var(--text);
      font-size: 14px;
      line-height: 1.65;
      word-break: keep-all;
      white-space: pre-wrap;
      margin-bottom: 12px;
    }

    .wrong-answer {
      color: var(--wrong);
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 10px;
    }

    .wrong-actions {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 8px;
  margin-top: 12px;
}

.wrong-toggle-btn,
.wrong-delete-btn {
  width: 100%;
  white-space: nowrap;
}

    .wrong-toggle-btn,
    .wrong-delete-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    }

    .wrong-toggle-btn {
      background: var(--navy);
      color: #ffffff;
      border-color: var(--navy);
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    }

    .wrong-delete-btn {
      background: #ffffff;
      color: var(--muted);
    }

    .wrong-toggle-btn:hover,
    .wrong-delete-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.09);
    }

    .wrong-toggle-btn:active,
    .wrong-delete-btn:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.055);
    }

    .wrong-explanation {
      display: none;
      margin-top: 12px;
      color: var(--text-soft);
      background: var(--surface-soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px;
      font-size: 13px;
      line-height: 1.65;
      white-space: pre-wrap;
      word-break: keep-all;
    }

    .wrong-explanation.show {
      display: block;
      animation: rise 0.22s ease both;
    }

    .archive-btn {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #eef2f7;
      background: transparent;
      color: var(--text);
      padding: 16px 12px;
      text-align: left;
      cursor: pointer;
      display: grid;
      grid-template-columns: 1fr auto auto 22px;
      align-items: center;
      gap: 18px;
      transition: background 0.16s ease, transform 0.16s ease;
    }

    .archive-btn:last-child {
      border-bottom: 0;
    }

    .archive-btn:hover,
    .archive-btn.active {
      background: var(--surface-soft);
    }

    .archive-btn:hover {
      transform: translateX(2px);
    }

    .archive-date {
      font-size: 15px;
      font-weight: 850;
    }

    .archive-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #166534;
      background: #dcfce7;
      border-radius: 999px;
      padding: 6px 11px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .archive-badge.pending {
      color: var(--warning);
      background: var(--warning-bg);
    }

    .archive-meta {
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .archive-arrow {
      color: var(--muted-light);
      font-size: 24px;
      line-height: 1;
    }

    .loading {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .spinner {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(148, 163, 184, 0.35);
      border-top-color: #475569;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .footer {
      text-align: center;
      color: var(--muted-light);
      font-size: 13px;
      font-weight: 700;
      margin-top: 34px;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%) translateY(20px);
      width: calc(100% - 32px);
      max-width: 460px;
      background: var(--navy);
      border: 1px solid rgba(15, 23, 42, 0.12);
      color: #ffffff;
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      box-shadow: var(--shadow);
      font-size: 14px;
      line-height: 1.55;
      z-index: 20;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .toast-message {
      min-width: 0;
    }

    .toast-undo-btn {
      flex: 0 0 auto;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      padding: 7px 10px;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .toast-undo-btn:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      background: #f6f8fb;
      padding: 18px 16px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }


    body.settings-modal-open #appRoot {
      visibility: hidden !important;
    }

    body.settings-modal-open,
    body.bookmark-modal-open,
    body.report-modal-open {
      overflow: hidden !important;
      overscroll-behavior: none;
    }

    .settings-overlay.hidden {
      display: none;
    }

    .settings-panel {
      position: relative;
      z-index: 10001;
      width: min(520px, calc(100vw - 32px));
      height: auto;
      max-height: calc(100dvh - 36px);
      overflow: hidden;
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 28px 84px rgba(15, 23, 42, 0.22);
      padding: 0;
    }

    .settings-handle {
      display: none;
    }

    .settings-page {
      display: none;
      height: auto;
      max-height: calc(100dvh - 36px);
      min-height: 0;
      flex-direction: column;
      background: #ffffff;
    }

    .settings-page.is-active {
      display: flex;
    }

    .settings-head {
      flex: 0 0 auto;
      min-height: 76px;
      padding: 16px 18px 10px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-main-head {
      justify-content: space-between;
    }

    .settings-detail-head {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
    }

    .settings-detail-head h2 {
      text-align: left;
    }

    .settings-head h2 {
      margin: 0;
      font-size: 23px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.045em;
    }

    .settings-head p {
      display: none;
    }

    .settings-close-btn,
    .settings-back-btn {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-soft);
      color: var(--text-soft);
      cursor: pointer;
    }

    .settings-back-btn {
      border-color: transparent;
      background: transparent;
    }

    .settings-close-btn svg,
    .settings-back-btn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .settings-page-body {
      flex: 0 1 auto;
      min-height: 0;
      max-height: calc(100dvh - 112px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 0 18px 18px;
    }

    .settings-page-body::-webkit-scrollbar {
      display: none;
    }

    .settings-account-panel {
      width: 100%;
      min-height: 64px;
      padding: 9px 12px;
      display: grid !important;
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface-soft);
      color: var(--text);
      justify-content: stretch !important;
      text-align: left !important;
      cursor: default;
    }

    .settings-avatar {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #0f172a;
      color: #ffffff;
      font-size: 14px;
      font-weight: 850;
    }

    .settings-account-copy {
      min-width: 0;
    }

    .settings-account-copy strong {
      display: block;
      overflow: hidden;
      color: var(--text);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 850;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .settings-account-copy small {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.3;
      font-weight: 650;
    }

    .settings-account-copy small i {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: #14b8a6;
    }

    .settings-account-copy small span {
      margin: 0;
      color: inherit;
      font: inherit;
    }

    .settings-list-card,
    .settings-detail-card,
    .settings-choice-card {
      margin-top: 10px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
    }

    .settings-secondary-card {
      margin-top: 10px;
    }

    .settings-nav-row {
      width: 100%;
      min-height: 56px;
      padding: 8px 11px;
      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr) auto 16px;
      align-items: center;
      gap: 9px;
      border: 0;
      background: #ffffff;
      color: var(--text);
      justify-content: stretch !important;
      text-align: left !important;
      cursor: pointer;
    }

    .settings-nav-row + .settings-nav-row {
      border-top: 1px solid var(--line);
    }

    .settings-direct-row {
      grid-template-columns: 34px minmax(0, 1fr) auto;
      cursor: default;
    }

    .settings-nav-row strong {
      display: block;
      min-width: 0;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 850;
    }

    .settings-list-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: var(--surface-soft);
      color: #718096;
    }

    .settings-list-icon svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .settings-row-value {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      font-weight: 700;
      white-space: nowrap;
    }

    .settings-chevron {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: #9aa7b8;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .settings-logout-btn {
      width: 100%;
      min-height: 44px;
      margin-top: 10px;
      border: 1px solid #f0d5d5;
      border-radius: 14px;
      background: #fffafa;
      color: #b94b4b;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .settings-control-row,
    .settings-status-row {
      min-height: 58px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .settings-control-row + .settings-control-row,
    .settings-control-row + .settings-option-row,
    .settings-option-row + .settings-control-row,
    .settings-status-row + .settings-control-row,
    .settings-control-row + .settings-status-row,
    .settings-status-row + .settings-status-row {
      border-top: 1px solid var(--line);
    }

    .settings-control-row > strong,
    .settings-control-row > span > strong,
    .settings-option-row > strong,
    .settings-status-row > strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 850;
    }

    .settings-control-row small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
      font-weight: 650;
    }

    .settings-status-row > span {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 750;
    }

    .settings-option-row {
      min-height: 80px;
      padding: 10px 12px;
      border-top: 1px solid var(--line);
    }

    .settings-option-row-first {
      border-top: 0;
    }

    .settings-segment {
      height: 34px;
      margin-top: 8px;
      padding: 3px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 3px;
      border-radius: 12px;
      background: var(--surface-muted);
    }

    .settings-segment-two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-segment-four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .settings-segment button {
      min-width: 0;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      font-weight: 750;
      cursor: pointer;
    }

    .settings-segment button.is-active {
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 1px 5px rgba(15, 23, 42, 0.1);
    }

    .settings-section-label {
      margin: 14px 4px 7px;
      color: var(--text-soft);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 850;
    }

    .settings-choice-card {
      margin-top: 0;
    }

    .settings-choice-card button {
      width: 100%;
      min-height: 54px;
      padding: 10px 13px;
      display: flex !important;
      align-items: center;
      justify-content: space-between !important;
      gap: 12px;
      border: 0;
      background: #ffffff;
      color: var(--text);
      text-align: left !important;
      cursor: pointer;
    }

    .settings-choice-card button + button {
      border-top: 1px solid var(--line);
    }

    .settings-choice-card button.is-active {
      background: #f5fbfa;
    }

    .settings-choice-card strong {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 850;
    }

    .settings-choice-card i {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border: 1.5px solid var(--line-strong);
      border-radius: 50%;
      background: #ffffff;
    }

    .settings-choice-card button.is-active i {
      border: 5.5px solid #0f9f92;
    }

    .settings-motion-card {
      margin-top: 10px;
    }

    .settings-essential-note {
      margin-top: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 15px;
      background: var(--surface-muted);
      color: var(--muted);
    }

    .settings-essential-note svg {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      margin-top: 1px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .settings-essential-note p {
      margin: 0;
      font-size: 10px;
      line-height: 1.6;
      font-weight: 650;
      word-break: keep-all;
    }

    #settingAutoNextWrongRow.is-disabled {
      opacity: 0.44;
    }

    #settingAutoNextWrongRow.is-disabled .switch-control {
      pointer-events: none;
    }

    .settings-panel .switch-control {
      width: 40px;
      height: 24px;
      flex: 0 0 40px;
    }

    .settings-panel .switch-track {
      width: 40px;
      height: 24px;
    }

    .settings-panel .switch-track::before {
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
    }

    .settings-panel .switch-control input:checked + .switch-track::before {
      transform: translateX(16px);
    }

    .settings-account-panel:focus-visible,
    .settings-nav-row:focus-visible,
    .settings-close-btn:focus-visible,
    .settings-back-btn:focus-visible,
    .settings-logout-btn:focus-visible,
    .settings-segment button:focus-visible,
    .settings-choice-card button:focus-visible {
      outline: 3px solid rgba(15, 159, 146, 0.24);
      outline-offset: 2px;
    }

    .settings-group {
      display: grid;
      gap: 8px;
      margin-bottom: 14px;
    }

    .settings-group-title {
      padding: 0 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
    }

    .settings-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface-soft);
      padding: 10px 12px;
    }

    .settings-row-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid var(--line);
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 950;
    }

    .settings-row strong {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
    }

    .settings-row span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 750;
    }

    .settings-value {
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .settings-link-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      white-space: nowrap;
    }

    .switch-control {
      position: relative;
      display: inline-flex;
      width: 48px;
      height: 28px;
    }

    .switch-control input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .switch-track {
      position: relative;
      width: 48px;
      height: 28px;
      border-radius: 999px;
      background: var(--line-strong);
      transition: background 0.18s ease;
      cursor: pointer;
    }

    .switch-track::before {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
      transition: transform 0.18s ease;
    }

    .switch-control input:checked + .switch-track {
      background: var(--navy);
    }

    .switch-control input:checked + .switch-track::before {
      transform: translateX(20px);
    }

    .settings-panel .switch-control {
      width: 40px;
      height: 24px;
      flex: 0 0 40px;
    }

    .settings-panel .switch-track {
      width: 40px;
      height: 24px;
    }

    .settings-panel .switch-track::before {
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
    }

    .settings-panel .switch-control input:checked + .switch-track {
      background: #0f9f92;
    }

    .settings-panel .switch-control input:checked + .switch-track::before {
      transform: translateX(16px);
    }

    code {
      background: #e2e8f0;
      padding: 2px 5px;
      border-radius: 6px;
      color: var(--text);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes correctPop {
      0% {
        opacity: 1;
      }

      45% {
        opacity: 0.96;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes wrongPop {
      0% {
        transform: translateX(0);
      }

      28% {
        transform: translateX(-4px);
      }

      56% {
        transform: translateX(4px);
      }

      100% {
        transform: translateX(0);
      }
    }

    @keyframes wrongShake {
      0% {
        transform: translateX(0);
      }

      20% {
        transform: translateX(-7px);
      }

      40% {
        transform: translateX(7px);
      }

      60% {
        transform: translateX(-5px);
      }

      80% {
        transform: translateX(5px);
      }

      100% {
        transform: translateX(0);
      }
    }

    @media (max-width: 760px) {
      body {
        padding: 18px 12px 108px;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .user-area {
        justify-content: flex-start;
      }

      .daily-hero {
        grid-template-columns: minmax(0, 1fr) 96px;
        align-items: center;
        gap: 12px;
      }

      .circle-progress {
        width: 96px;
        height: 96px;
        --ring: 6px;
      }

      .circle-progress strong {
        font-size: 24px;
        transform: translate(-50%, -60%);
      }

      .circle-progress span {
        bottom: 19px;
        font-size: 12px;
      }

      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .storage-hub-grid {
        grid-template-columns: 1fr;
      }

      .quick-launch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .profile-summary {
        grid-template-columns: 1fr;
      }

      .topic-grid {
        grid-template-columns: 1fr;
      }

      .feature-page-active .topic-grid,
      .review-mode-grid,
      .passage-library-grid {
        grid-template-columns: 1fr;
      }

      body.feature-page-active .feature-toolbelt,
      body.exam-tab-active .exam-control-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      body.exam-tab-active .exam-control-panel {
        display: grid;
      }

      .feature-filter-row,
      .exam-control-row {
        justify-content: flex-start;
      }

      body.feature-page-active .qna-board-head {
        display: none;
      }

      body.feature-page-active .qna-item {
        grid-template-columns: minmax(0, 1fr) 28px;
      }

      body.feature-page-active .qna-item-label {
        display: none;
      }

      body.feature-page-active .qna-item .qna-question {
        grid-column: 1;
      }

      body.feature-page-active .qna-item-arrow {
        grid-column: 2;
      }

      body.exam-tab-active .exam-player-status {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .archive-btn {
        grid-template-columns: 1fr auto;
        gap: 8px;
      }

      .archive-badge,
      .archive-meta {
        grid-column: 1;
        justify-self: start;
      }

      .archive-arrow {
        grid-column: 2;
        grid-row: 1 / span 3;
      }

      .question,
      .exam-question {
        font-size: 18px;
      }

      .answer-btn {
        min-height: 58px;
        font-size: 27px;
      }

      .answer-grid,
      .multi-bottom-actions {
        position: static;
        bottom: auto;
        z-index: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        backdrop-filter: none;
      }

      .answer-grid.answered {
        position: static;
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;
        backdrop-filter: none;
      }

      .next-btn.show,
      .restart-btn.show,
      .exam-next-btn.show {
        position: static;
        bottom: auto;
        z-index: auto;
      }

      .leaderboard-podium {
        grid-template-columns: 1fr;
      }

      .leaderboard-card,
      .leaderboard-card.rank-1,
      .leaderboard-card.rank-2,
      .leaderboard-card.rank-3 {
        min-height: auto;
      }

      .leaderboard-row {
        grid-template-columns: 38px minmax(0, 1fr);
      }

      .leaderboard-row .leaderboard-score {
        grid-column: 2;
      }
    }

    @media (max-width: 480px) {
      .card-inner {
        padding: 20px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .stat-card {
        min-height: 68px;
        padding: 10px;
      }

      .stat-card-label {
        font-size: 11px;
        margin-bottom: 6px;
        gap: 6px;
      }

      .stat-card-value {
        font-size: 16px;
      }

      .daily-title {
        font-size: 22px;
      }

      .section-title {
        font-size: 19px;
      }

      .mini-card .card-inner {
  position: relative;
  padding-right: 116px;
}

.mini-visual-wrap {
  position: absolute;
  right: 20px;
  top: 82px;
  width: 76px;
  height: 76px;
}

.mini-visual {
  margin: 0;
  font-size: 12px;
}
.practice-panel,
.wrong-panel {
  margin-right: -96px;
}
      .multi-bottom-actions {
        grid-template-columns: 82px 1fr;
      }
    }
    /* Compact mobile learning-app refinement. Fixed O/X controls live only here. */
    .today-task-card {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 10px 0 14px;
    }

    .home-daily-label { order: 1; }
    .study-hero-card { order: 2; }
    .today-task-card { order: 3; }
    .dashboard-grid[data-study-home] { order: 4; }
    .home-shortcut-label { order: 5; }
    .quick-launch-grid { order: 6; }
    .home-storage-label { order: 7; }

    .today-task-btn {
      min-height: 78px;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      color: var(--text);
      padding: 12px;
      box-shadow: none;
    }

    .today-task-btn strong {
      display: block;
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 4px;
    }

    .today-task-btn span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
    }

    /* Compact study home. Keeps the home as a dense action screen, not a landing page. */
    .home-daily-label,
    .home-shortcut-label,
    .home-storage-label {
      margin: 14px 2px 8px;
      font-size: 14px;
    }

    .home-daily-label span,
    .home-shortcut-label span,
    .home-storage-label span {
      font-size: 11px;
    }

    .study-hero-card {
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
    }

    .study-hero-card .card-inner {
      padding: 16px;
      background: #ffffff;
    }

    .daily-hero {
      grid-template-columns: minmax(0, 1fr) 76px;
      min-height: 0;
      gap: 12px;
    }

    .daily-hero::before {
      display: none;
    }

    .daily-title-row {
      gap: 9px;
      margin-bottom: 6px;
    }

    .daily-icon {
      width: 34px;
      height: 30px;
      border-radius: 10px;
      font-size: 11px;
    }

    .daily-title {
      font-size: 20px;
      letter-spacing: -0.035em;
    }

    .daily-desc {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.45;
    }

    .daily-hero-meta {
      gap: 6px;
      margin: 0 0 10px;
    }

    .daily-hero-chip {
      padding: 5px 8px;
      font-size: 11px;
      box-shadow: none;
    }

    .study-hero-card .ox-action-btn {
      min-height: 42px;
      width: min(180px, 100%);
      border-radius: 14px;
      padding: 0 14px;
      font-size: 13px;
      box-shadow: none;
    }

    .study-hero-card .circle-progress {
      --ring: 5px;
      width: 72px;
      height: 72px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
    }

    .study-hero-card .circle-progress strong {
      font-size: 17px;
      transform: translate(-50%, -58%);
      -webkit-text-stroke: 0;
    }

    .study-hero-card .circle-progress span {
      bottom: 15px;
      font-size: 10px;
      font-weight: 900;
    }

    .today-task-card {
      gap: 7px;
      margin: 8px 0 12px;
    }

    .today-task-btn {
      min-height: 58px;
      border-radius: 14px;
      padding: 10px;
    }

    .today-task-btn strong {
      font-size: 13px;
      margin-bottom: 3px;
    }

    .today-task-btn span {
      font-size: 10px;
      line-height: 1.25;
    }

    .dashboard-grid[data-study-home] {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }

    .dashboard-grid[data-study-home] .exam-tab-card,
    .dashboard-grid[data-study-home] .study-storage-card {
      grid-column: 1;
    }

    .dashboard-grid[data-study-home] .mini-card {
      min-height: 0;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .dashboard-grid[data-study-home] .mini-card .card-inner {
      min-height: 0;
      padding: 14px;
    }

    .dashboard-grid[data-study-home] .section-head {
      margin-bottom: 8px;
      padding-right: 74px;
    }

    .dashboard-grid[data-study-home] .section-title {
      font-size: 17px;
      gap: 8px;
    }

    .dashboard-grid[data-study-home] .exam-tab-title,
    body.exam-tab-active .home-exam-title {
      display: none;
    }

    body.exam-tab-active .exam-tab-title {
      display: inline;
    }

    .dashboard-grid[data-study-home] .section-desc {
      max-width: none;
      margin: 5px 0 0;
      font-size: 12px;
      line-height: 1.4;
    }

    .dashboard-grid[data-study-home] .mini-icon {
      width: 32px;
      height: 30px;
      border-radius: 10px;
      font-size: 12px;
    }

    .dashboard-grid[data-study-home] .mini-stat {
      margin-top: 6px;
      font-size: 12px;
    }

    .dashboard-grid[data-study-home] #examStreakWrap {
      right: 14px;
      top: 16px;
      width: 58px;
      height: 58px;
      opacity: 0.9;
    }

    .dashboard-grid[data-study-home] #examStreakWrap .mini-visual {
      right: 0;
      top: 0;
      width: 58px;
      height: 58px;
      font-size: 17px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
    }

    .dashboard-grid[data-study-home] #examStreakWrap .streak-smoke {
      inset: -7px;
      opacity: 0.16;
    }

    .dashboard-grid[data-study-home] .exam-player-status {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin: 10px 0;
    }

    .dashboard-grid[data-study-home] .exam-player-status > div {
      padding: 8px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
    }

    .dashboard-grid[data-study-home] .exam-player-status span {
      font-size: 10px;
      margin-bottom: 4px;
    }

    .dashboard-grid[data-study-home] .exam-player-status strong {
      font-size: 15px;
    }

    .dashboard-grid[data-study-home] .mini-card-actions {
      margin-top: 0;
    }

    .dashboard-grid[data-study-home] .mini-card-actions .soft-btn {
      min-height: 42px;
      border-radius: 14px;
      font-size: 13px;
      box-shadow: none;
    }

    .quick-launch-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .quick-launch-btn {
      grid-template-columns: 34px minmax(0, 1fr);
      justify-items: start;
      align-items: center;
      gap: 4px 9px;
      min-height: 64px;
      border-radius: 16px;
      padding: 11px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
    }

    .quick-launch-icon {
      grid-row: 1 / span 2;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      font-size: 15px;
    }

    .quick-launch-title {
      font-size: 13px;
      text-align: left;
    }

    .quick-launch-sub {
      font-size: 10px;
      text-align: left;
    }

    .study-storage-card.storage-hub {
      background: #ffffff;
    }

    .storage-hub-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .storage-hub-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 10px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
    }

    .storage-hub-title {
      margin: 0 0 3px;
      font-size: 13px;
    }

    .storage-hub-stat {
      font-size: 11px;
    }

    .storage-hub-item .soft-btn {
      min-height: 36px;
      width: auto;
      padding: 0 11px;
      border-radius: 12px;
      font-size: 12px;
      box-shadow: none;
    }

    @media (min-width: 700px) {
      .dashboard-grid[data-study-home] {
        grid-template-columns: 1fr 1fr;
      }
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding-top: 18px;
    }

    body.feature-page-active .section-head {
      margin-bottom: 12px;
    }

    body.feature-page-active .section-desc {
      font-size: 13px;
      line-height: 1.45;
    }

    body.feature-page-active .feature-toolbelt {
      margin-bottom: 12px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active .topic-btn,
    body.feature-page-active .review-mode-card,
    body.feature-page-active .passage-library-card,
    body.feature-page-active .qna-board-shell,
    body.feature-page-active .qna-detail,
    body.feature-page-active .qna-form {
      border-radius: 16px;
      box-shadow: none;
      border-color: var(--line);
    }

    .question,
    .exam-question {
      font-size: clamp(20px, 4.8vw, 24px);
      line-height: 1.6;
      letter-spacing: -0.025em;
    }

    .question-box,
    .exam-question-box {
      padding: 18px;
      border-radius: 18px;
      box-shadow: none;
    }

    .learning-player-dock {
      position: fixed;
      left: 50%;
      bottom: max(14px, env(safe-area-inset-bottom));
      z-index: 80;
      width: min(520px, calc(100vw - 24px));
      transform: translateX(-50%);
      padding: 8px;
      border: 1px solid rgba(203, 213, 225, 0.95);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
      backdrop-filter: blur(14px);
    }

    .answer-grid,
    .next-btn.show,
    .restart-btn.show,
    .exam-next-btn.show {
      position: static;
      transform: none;
    }

    .learning-player-dock .answer-grid,
    .learning-player-dock .exam-action-dock,
    .learning-player-dock .exam-next-btn.show,
    .learning-player-dock .next-btn.show {
      position: static !important;
      width: 100%;
      transform: none !important;
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .learning-player-dock .answer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .learning-player-dock .answer-btn {
      min-height: 58px;
      border-radius: 16px;
      font-size: 27px;
      box-shadow: none;
    }

    .learning-player-dock.feedback-correct {
      border-color: #86efac;
      background: rgba(240, 253, 244, 0.97);
    }

    .learning-player-dock.feedback-wrong {
      border-color: #fca5a5;
      background: rgba(254, 242, 242, 0.97);
    }

    .learning-player-dock.feedback-correct,
    .learning-player-dock.feedback-wrong {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    .exam-dock-feedback {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
    }

    .exam-dock-message {
      font-size: 14px;
      font-weight: 950;
      color: var(--text);
    }

    .exam-explain-btn {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text-soft);
      font-weight: 900;
      padding: 0 12px;
    }

    .learning-player-dock .exam-next-btn.show,
    .learning-player-dock .next-btn.show {
      min-height: 42px;
      width: auto;
      border-radius: 14px;
      background: var(--navy);
      color: #ffffff;
      font-size: 14px;
      font-weight: 950;
      padding: 0 14px;
    }

    body.player-active .bottom-tabbar {
      display: none;
    }

    body.exam-tab-active #examPracticeBox {
      display: grid;
      gap: 14px;
      padding-bottom: 92px;
    }

    body.exam-tab-active .exam-player-stage {
      display: grid;
      gap: 12px;
    }

    body.exam-tab-active .exam-player-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    body.exam-tab-active .exam-player-title {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    body.exam-tab-active .exam-player-subtitle {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    body.exam-tab-active .exam-player-head .explanation-toggle-row {
      margin: 0;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      box-shadow: none;
    }

    body.exam-tab-active .exam-status-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 72px;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    body.exam-tab-active .exam-status-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    body.exam-tab-active .exam-status-item {
      min-width: 0;
      padding: 10px 9px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
    }

    body.exam-tab-active .exam-status-item span {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    body.exam-tab-active .exam-status-item strong {
      color: var(--text);
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -0.03em;
    }

    body.exam-tab-active .exam-status-badge {
      position: relative;
      display: grid;
      place-items: center;
      width: 66px;
      height: 66px;
      border-radius: 50%;
      color: #ffffff;
      background: var(--navy);
      font-size: 16px;
      font-weight: 950;
      letter-spacing: -0.04em;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
      overflow: hidden;
      isolation: isolate;
    }

    body.exam-tab-active .exam-status-badge::before {
      content: "";
      position: absolute;
      inset: -8px;
      z-index: -1;
      opacity: 0.12;
      background: radial-gradient(circle at 30% 30%, #c4b5fd, transparent 48%),
        radial-gradient(circle at 70% 70%, #93c5fd, transparent 52%);
      animation: streakSmokeDrift 9s linear infinite;
    }

    body.exam-tab-active .exam-player-card {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
      overflow: hidden;
    }

    body.exam-tab-active .exam-question-box {
      margin: 0;
      padding: 20px 18px 16px;
      border: 0;
      border-radius: 0;
      background: #ffffff;
      box-shadow: none;
    }

    body.exam-tab-active .exam-question-box .question-label {
      margin-bottom: 12px;
      color: #64748b;
      font-size: 12px;
      letter-spacing: 0.02em;
    }

    body.exam-tab-active .exam-question {
      text-align: left;
      font-size: clamp(20px, 4.6vw, 24px);
      line-height: 1.62;
      font-weight: 900;
      letter-spacing: -0.035em;
    }

    body.exam-tab-active .inline-cycle-count {
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-align: right;
    }

    body.exam-tab-active .exam-choice-area,
    body.exam-tab-active .exam-result-area,
    body.exam-tab-active .exam-multi-control-area {
      padding: 0 14px 14px;
    }

    body.exam-tab-active .exam-choice-area .answer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 0;
      position: static;
      width: 100%;
      transform: none;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    body.exam-tab-active .exam-choice-area .answer-btn {
      min-height: 56px;
      height: 56px;
      border-radius: 16px;
      border: 1px solid #d8dee8;
      background: #ffffff;
      color: var(--text);
      font-size: 26px;
      font-weight: 950;
      line-height: 1;
      box-shadow: none;
      transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.16s ease, background 0.16s ease;
    }

    body.exam-tab-active .exam-choice-area .answer-btn:hover {
      transform: translateY(-1px);
      border-color: #cbd5e1;
      box-shadow: none;
    }

    body.exam-tab-active .exam-choice-area .answer-btn:active {
      transform: scale(0.94);
    }

    body.exam-tab-active .exam-feedback {
      margin: 0;
      border-radius: 16px;
      padding: 14px;
      box-shadow: none;
    }

    body.exam-tab-active .exam-result-area .exam-next-btn.show {
      display: block;
      min-height: 48px;
      margin-top: 12px;
      border-radius: 15px;
      font-size: 15px;
      box-shadow: none;
    }

    body.exam-tab-active .exam-result-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    body.exam-tab-active .exam-result-actions .tiny-btn,
    body.exam-tab-active .exam-explain-btn {
      min-height: 42px;
      border-radius: 13px;
      box-shadow: none;
    }

    body.exam-tab-active .multi-progress,
    body.exam-tab-active .multi-target-box {
      margin: 0 14px 12px;
    }

    body.exam-tab-active .multi-bottom-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }

    body.exam-tab-active .cycle-complete .exam-next-btn.show {
      display: block;
      min-height: 50px;
      border-radius: 16px;
      box-shadow: none;
    }

    @media (max-width: 520px) {
      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 62px;
      }

      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.exam-tab-active .exam-status-badge {
        width: 60px;
        height: 60px;
        font-size: 14px;
      }
    }

    .report-sheet-overlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: end center;
      padding: 16px;
      background: rgba(15, 23, 42, 0.22);
      backdrop-filter: blur(6px);
    }

    .report-sheet {
      width: min(480px, 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
      padding: 16px;
    }

    .report-sheet-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .report-sheet-title {
      font-size: 17px;
      font-weight: 950;
      color: var(--text);
    }

    .report-sheet-copy {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      word-break: keep-all;
    }

    .report-close-btn {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
      color: var(--muted);
      font-size: 20px;
    }

    .report-type-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin: 10px 0;
    }

    .report-type-btn {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #f8fafc;
      color: var(--text-soft);
      font-weight: 900;
    }

    .report-type-btn.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #ffffff;
    }

    .report-sheet textarea {
      width: 100%;
      min-height: 108px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #f8fafc;
      color: var(--text);
      padding: 12px;
      font: inherit;
      font-size: 14px;
      outline: 0;
    }

    .report-sheet-actions {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 8px;
      margin-top: 10px;
    }

    .report-sheet-actions button {
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid var(--line);
      font-weight: 950;
    }

    .report-cancel-btn {
      background: #ffffff;
      color: var(--text-soft);
    }

    .report-submit-btn {
      background: var(--navy);
      color: #ffffff;
    }

    /* Purpose-specific compact screens */
    body.feature-page-active {
      background: var(--bg);
      padding-top: 18px;
    }

    body.feature-page-active .app {
      max-width: 760px;
      gap: 10px;
    }

    body.feature-page-active .study-feature-nav {
      top: 8px;
      border-radius: 18px;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--line);
    }

    body.feature-page-active .study-home-btn {
      min-height: 36px;
      padding: 0 12px;
      border-radius: 13px;
      background: #ffffff;
      color: var(--text-soft);
      border: 1px solid var(--line);
    }

    body.feature-page-active .study-feature-card {
      min-height: auto;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding: 18px;
    }

    body.feature-page-active .section-head {
      margin-bottom: 12px;
    }

    body.feature-page-active .section-title {
      font-size: 21px;
    }

    body.feature-page-active .section-desc {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.45;
    }

    body.feature-page-active .feature-toolbelt {
      display: grid;
      gap: 8px;
      margin: 0 0 12px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fbfcfe;
      box-shadow: none;
    }

    body.feature-page-active .feature-search {
      min-height: 40px;
      border-radius: 13px;
      font-size: 13px;
    }

    body.feature-page-active .feature-filter-row {
      gap: 6px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }

    body.feature-page-active .feature-filter-row::-webkit-scrollbar {
      display: none;
    }

    body.feature-page-active .feature-filter-btn {
      flex: 0 0 auto;
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 12px;
      box-shadow: none;
    }

    body.feature-page-active .feature-filter-btn.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #ffffff;
    }

    body.feature-page-active .topic-roadmap,
    body.feature-page-active .passage-library-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    body.feature-page-active .topic-roadmap::before,
    body.feature-page-active .topic-roadmap .topic-card::after,
    body.feature-page-active .topic-card::before,
    body.feature-page-active .passage-library-card::before,
    body.feature-page-active .review-mode-card::before {
      display: none;
    }

    body.feature-page-active .topic-btn,
    body.feature-page-active .passage-library-card {
      min-height: auto;
      border-radius: 15px;
      padding: 13px;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active .topic-name,
    body.feature-page-active .passage-thinker {
      font-size: 15px;
      font-weight: 950;
    }

    body.feature-page-active .topic-meta,
    body.feature-page-active .passage-library-meta {
      font-size: 12px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="passage"] .card-inner {
      display: grid;
      gap: 12px;
    }

    body.feature-page-active [data-feature-panel="passage"] .section-head {
      display: block;
      margin-bottom: 0;
    }

    body.feature-page-active [data-feature-panel="passage"] .section-title {
      font-size: 22px;
      letter-spacing: -0.035em;
    }

    body.feature-page-active [data-feature-panel="passage"] .section-desc {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="passage"] .feature-toolbelt {
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    body.feature-page-active [data-feature-panel="passage"] .feature-search {
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-panel {
      border: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    .passage-chip-row {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 2px;
      margin-bottom: 10px;
      scrollbar-width: none;
    }

    .passage-chip-row::-webkit-scrollbar {
      display: none;
    }

    .passage-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 0 11px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .passage-chip strong {
      color: var(--muted);
      font-size: 11px;
      font-weight: 950;
    }

    .passage-chip.active {
      border-color: #cbd5e1;
      background: #f8fafc;
      color: var(--text);
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 0;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-card {
      display: grid;
      gap: 8px;
      min-height: 0;
      border-radius: 16px;
      padding: 12px;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-card::before {
      display: none;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-card:hover {
      transform: translateY(-1px);
      border-color: #cbd5e1;
      box-shadow: none;
    }

    .passage-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-thinker {
      color: var(--text);
      font-size: 13px;
      font-weight: 950;
    }

    .passage-keyword {
      max-width: 48%;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      background: #f8fafc;
      color: var(--text-soft);
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .passage-excerpt {
      color: var(--soft);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.55;
      word-break: keep-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .passage-read-btn {
      justify-self: start;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      color: #111827;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 950;
    }

    body.feature-page-active .topic-progress-track {
      height: 6px;
      margin: 10px 0 8px;
    }

    body.feature-page-active .topic-achievement-row,
    body.feature-page-active .topic-course-footer {
      gap: 6px;
      font-size: 12px;
    }

    body.feature-page-active .topic-risk-badge,
    body.feature-page-active .topic-course-badge,
    body.feature-page-active .topic-start-chip {
      font-size: 11px;
      padding: 5px 7px;
      border-radius: 999px;
    }

    body.feature-page-active [data-feature-panel="topic"] .card-inner {
      display: grid;
      gap: 12px;
    }

    body.feature-page-active [data-feature-panel="topic"] .section-head {
      display: block;
      margin-bottom: 0;
    }

    body.feature-page-active [data-feature-panel="topic"] .section-title {
      font-size: 22px;
      letter-spacing: -0.035em;
    }

    body.feature-page-active [data-feature-panel="topic"] .section-desc {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="topic"] .feature-toolbelt {
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .feature-search {
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    body.feature-page-active [data-feature-panel="topic"] .feature-filter-row {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .feature-filter-row::-webkit-scrollbar {
      display: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .feature-filter-btn {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 11px;
      border-radius: 12px;
      font-size: 12px;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-roadmap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin: 0;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-roadmap::before,
    body.feature-page-active [data-feature-panel="topic"] .topic-card::before,
    body.feature-page-active [data-feature-panel="topic"] .topic-card::after {
      display: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-card {
      min-height: 0;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-btn {
      min-height: 132px;
      height: auto;
      display: grid;
      gap: 8px;
      border-radius: 18px;
      padding: 12px 12px 11px;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-btn:hover {
      transform: translateY(-1px);
      border-color: #cbd5e1;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-btn.active {
      border-color: #94a3b8;
      background: #fbfcfe;
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-favorite-btn {
      top: 10px;
      right: 10px;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: transparent;
      box-shadow: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-course-top {
      align-items: flex-start;
      gap: 10px;
      padding-right: 30px;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-name {
      font-size: 15px;
      line-height: 1.28;
      letter-spacing: -0.03em;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-meta {
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-status-orb {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-status-orb.danger {
      color: #b91c1c;
      background: #fef2f2;
      border-color: #fecaca;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-status-orb.warn {
      color: #a16207;
      background: #fffbeb;
      border-color: #fde68a;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-status-orb.safe {
      color: #047857;
      background: #ecfdf5;
      border-color: #bbf7d0;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row span {
      min-width: 0;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
      color: var(--text-soft);
      padding: 6px 7px;
      font-size: 10px;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row .danger {
      color: #b91c1c;
      background: #fef2f2;
      border-color: #fee2e2;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row .warn {
      color: #a16207;
      background: #fffbeb;
      border-color: #fef3c7;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row .safe {
      color: #047857;
      background: #ecfdf5;
      border-color: #d1fae5;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-progress-track {
      height: 6px;
      margin: 0;
      background: #edf2f7;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-progress-fill {
      background: #475569;
      transition: width 0.35s ease;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-achievement-row {
      display: none;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-course-footer {
      align-items: center;
      font-size: 11px;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-start-chip {
      min-width: 72px;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      padding: 7px 9px;
      color: #111827;
      font-size: 12px;
      text-align: center;
    }

    @media (min-width: 760px) {
      body.feature-page-active [data-feature-panel="topic"] .topic-roadmap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .review-mode-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .review-mission-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 2px;
    }

    .review-mission-stats > div {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fbfcfe;
      padding: 9px 8px;
    }

    .review-mission-stats span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      margin-bottom: 3px;
    }

    .review-mission-stats strong {
      color: var(--text);
      font-size: 17px;
      font-weight: 950;
    }

    body.feature-page-active .review-mode-card {
      min-height: auto;
      border-radius: 16px;
      padding: 14px;
      box-shadow: none;
    }

    body.feature-page-active .review-mode-kicker {
      display: none;
    }

    body.feature-page-active .review-mode-title {
      font-size: 16px;
    }

    body.feature-page-active .review-mode-copy {
      font-size: 12px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="review"] .card-inner {
      display: grid;
      gap: 12px;
    }

    body.feature-page-active [data-feature-panel="review"] .section-head {
      display: block;
      margin-bottom: 0;
    }

    body.feature-page-active [data-feature-panel="review"] .section-title {
      font-size: 22px;
      letter-spacing: -0.035em;
    }

    body.feature-page-active [data-feature-panel="review"] .section-desc {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats {
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats > div {
      border-radius: 14px;
      padding: 10px;
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats span {
      font-size: 11px;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats strong {
      font-size: 20px;
      letter-spacing: -0.04em;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-card {
      display: grid;
      gap: 8px;
      min-height: 118px;
      border-radius: 16px;
      padding: 13px;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-card::before {
      display: none;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-title {
      font-size: 15px;
      line-height: 1.25;
    }

    body.feature-page-active [data-feature-panel="review"] .review-count-pill {
      min-width: 30px;
      height: 24px;
      margin-left: 4px;
      font-size: 11px;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-copy {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-action {
      align-self: end;
      justify-content: center;
      min-height: 34px;
      margin-top: 0;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      color: #111827;
      font-size: 12px;
    }

    .review-preview-board {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      padding: 12px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
    }

    .review-preview-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .review-preview-head strong {
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
    }

    .review-preview-head span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .review-preview-list {
      display: grid;
      gap: 7px;
    }

    .review-preview-item {
      border: 1px solid #eef2f7;
      border-radius: 13px;
      background: #f8fafc;
      padding: 9px 10px;
    }

    .review-preview-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 6px;
    }

    .review-preview-meta span {
      max-width: 100%;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: var(--text-soft);
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .review-preview-question {
      color: var(--text);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
      word-break: keep-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    body.feature-page-active .qna-panel,
    body.feature-page-active .passage-panel {
      border: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    body.feature-page-active .qna-board-shell,
    body.feature-page-active .qna-detail,
    body.feature-page-active .qna-form {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: none;
    }

    body.feature-page-active .qna-board-head {
      display: none;
    }

    body.feature-page-active .qna-item {
      border-radius: 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      padding: 12px;
      box-shadow: none;
    }

    body.feature-page-active .qna-item:last-child {
      border-bottom: 0;
    }

    body.feature-page-active .qna-item-label {
      display: none;
    }

    body.feature-page-active .qna-item .qna-question {
      font-size: 14px;
      line-height: 1.45;
    }

    body.feature-page-active [data-feature-panel="qna"] .card-inner {
      display: grid;
      gap: 12px;
    }

    body.feature-page-active [data-feature-panel="qna"] .section-head {
      display: block;
      margin-bottom: 0;
    }

    body.feature-page-active [data-feature-panel="qna"] .section-title {
      font-size: 22px;
      letter-spacing: -0.035em;
    }

    body.feature-page-active [data-feature-panel="qna"] .section-desc {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-panel {
      border: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    .qna-board-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    body.feature-page-active [data-feature-panel="qna"] .feature-search {
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-compose-toggle {
      min-height: 42px;
      border-radius: 14px;
      padding: 0 13px;
      font-size: 13px;
      white-space: nowrap;
      box-shadow: none;
    }

    .qna-filter-row {
      justify-content: flex-start;
      gap: 7px;
      margin: 8px 0 10px;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-board-shell {
      display: grid;
      gap: 8px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    /* HYUNWOO FINAL QUESTION SCROLL LOCK: gray question box scrolls; thinker box does not. */
    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;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-item {
      display: grid;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #ffffff;
      padding: 11px 12px;
      box-shadow: none;
      text-align: left;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-item-top {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-status,
    .qna-mine-badge,
    .qna-time {
      display: inline-flex;
      align-items: center;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      background: #f8fafc;
      color: var(--text-soft);
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-status.answered {
      color: #047857;
      border-color: #bbf7d0;
      background: #ecfdf5;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-status.pending {
      color: #a16207;
      border-color: #fde68a;
      background: #fffbeb;
    }

    .qna-time {
      margin-left: auto;
      color: var(--muted);
      background: #ffffff;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-item .qna-question {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .qna-excerpt {
      color: var(--soft);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
      word-break: keep-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .qna-item-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-detail {
      display: grid;
      gap: 10px;
      margin-top: 0;
      border-radius: 16px;
      padding: 12px;
      box-shadow: none;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-detail-head {
      padding-bottom: 8px;
      margin-bottom: 0;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-detail-close,
    .qna-list-back-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fafc;
      color: var(--text-soft);
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
    }

    .qna-question-card,
    .qna-answer-card {
      border: 1px solid #eef2f7;
      border-radius: 14px;
      background: #ffffff;
      padding: 12px;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-detail-title {
      margin-bottom: 0;
      font-size: 16px;
      line-height: 1.55;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-detail-answer {
      border-top: 0;
      padding-top: 8px;
      font-size: 14px;
      line-height: 1.7;
    }

    .qna-list-back-btn {
      width: 100%;
      min-height: 42px;
      color: var(--text);
    }

    .exam-more-menu {
      width: 100%;
    }

    .exam-more-menu summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 0 12px;
      font-size: 12px;
      font-weight: 900;
    }

    .exam-more-menu summary::-webkit-details-marker {
      display: none;
    }

    .exam-more-menu[open] .exam-control-copy {
      margin: 10px 0 8px;
    }

    .multi-bottom-actions {
      position: static !important;
      bottom: auto !important;
      box-shadow: none !important;
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
    }
  

    /* HYUNWOO FIX 2026-06-29
       핵심: 공통 floating OX dock, compact scale, feature page 약화, 기타 치환 금지 후속 UI 정리 */
    :root {
      --hy-app-max: 560px;
      --hy-card-pad: 16px;
      --hy-card-radius: 17px;
      --hy-gap: 14px;
      --hy-dock-w: min(560px, calc(100vw - 28px));
      --hy-dock-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    body {
      padding: 18px 14px calc(92px + env(safe-area-inset-bottom));
    }

    .app {
      max-width: var(--hy-app-max) !important;
      gap: 0 !important;
    }

    .topbar {
      margin-bottom: 12px !important;
      padding: 4px 2px 8px !important;
    }

    .brand h1 {
      font-size: clamp(24px, 6vw, 30px) !important;
    }

    .brand span {
      font-size: 13px !important;
    }

    .card,
    .profile-hero,
    .profile-mini-panel,
    .profile-section-card,
    .today-task-card,
    .study-storage-card,
    .storage-hub-item,
    .qna-board-shell,
    .passage-library-card,
    .topic-btn,
    .review-mode-card {
      border-radius: var(--hy-card-radius) !important;
      box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
      border-color: var(--line) !important;
    }

    .card-inner,
    .study-feature-card .card-inner,
    body.feature-page-active .study-feature-card .card-inner,
    body.feature-page-active [data-feature-panel] .card-inner {
      padding: var(--hy-card-pad) !important;
    }

    .section-label {
      margin: 16px 2px 8px !important;
      font-size: 14px !important;
    }

    .section-title {
      font-size: 18px !important;
      line-height: 1.35 !important;
    }

    .section-desc {
      font-size: 13px !important;
      line-height: 1.55 !important;
      margin-top: 5px !important;
    }

    .daily-hero {
      min-height: 124px !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      gap: 12px !important;
    }

    .daily-title {
      font-size: 21px !important;
    }

    .daily-desc {
      font-size: 14px !important;
      margin-bottom: 12px !important;
    }

    .daily-hero-meta {
      margin: -2px 0 12px !important;
    }

    .daily-hero-chip,
    .feature-filter-btn,
    .exam-control-btn,
    .multi-chip,
    .mode-badge {
      font-size: 12px !important;
      padding: 6px 9px !important;
    }

    .circle-progress,
    .study-hero-card .circle-progress {
      width: 64px !important;
      height: 64px !important;
      --ring: 5px !important;
      box-shadow: 0 8px 18px rgba(15,23,42,.07) !important;
    }

    .circle-progress strong,
    .study-hero-card .circle-progress strong {
      font-size: 17px !important;
      transform: translate(-50%, -58%) !important;
    }

    .circle-progress span,
    .study-hero-card .circle-progress span {
      bottom: 13px !important;
      font-size: 10px !important;
    }

    .today-task-card {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 10px !important;
      margin-bottom: 12px !important;
    }

    .today-task-btn {
      min-height: 58px !important;
      padding: 11px 13px !important;
      border-radius: 14px !important;
    }

    .today-task-btn strong { font-size: 14px !important; }
    .today-task-btn span { font-size: 12px !important; }

    .dashboard-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-bottom: 12px !important;
    }

    .mini-card,
    .mini-card .card-inner {
      min-height: 0 !important;
    }

    .mini-visual-wrap {
      right: 16px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 62px !important;
      height: 62px !important;
    }

    .mini-visual {
      font-size: 13px !important;
    }

    .mini-card .section-desc {
      max-width: calc(100% - 82px) !important;
      margin-bottom: 14px !important;
    }

    .mini-card-actions {
      margin-top: 10px !important;
    }

    .quick-launch-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 9px !important;
      margin-bottom: 12px !important;
    }

    .quick-launch-btn {
      min-height: 82px !important;
      border-radius: 16px !important;
      padding: 12px 8px 10px !important;
      gap: 6px !important;
    }

    .quick-launch-icon {
      width: 32px !important;
      height: 32px !important;
      border-radius: 11px !important;
      font-size: 15px !important;
    }

    .quick-launch-title { font-size: 13px !important; }
    .quick-launch-sub { font-size: 12px !important; line-height: 1.3 !important; }

    .storage-hub-grid {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      margin-top: 0 !important;
    }

    .storage-hub-item {
      padding: 13px !important;
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 10px !important;
    }

    /* feature page를 대형 랜딩 페이지가 아니라 같은 앱 shell 안 compact section으로 낮춤 */
    body.feature-page-active {
      padding-top: 18px !important;
      background: var(--bg) !important;
    }

    body.feature-page-active .topbar {
      display: flex !important;
    }

    body.feature-page-active .bottom-tabbar {
      display: grid !important;
    }

    body.feature-page-active .app {
      max-width: var(--hy-app-max) !important;
      gap: 0 !important;
    }

    body.feature-page-active .study-feature-nav {
      position: sticky !important;
      top: 8px !important;
      z-index: 30 !important;
      margin: 0 0 10px !important;
      padding: 7px !important;
      border-radius: 18px !important;
      box-shadow: 0 8px 22px rgba(15,23,42,.07) !important;
    }

    body.feature-page-active .study-feature-card {
      min-height: 0 !important;
      border: 1px solid var(--line) !important;
      border-radius: var(--hy-card-radius) !important;
      background: #fff !important;
      box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
    }

    body.feature-page-active .section-head {
      display: flex !important;
      margin-bottom: 12px !important;
    }

    body.feature-page-active .feature-toolbelt,
    .feature-command-strip,
    .feature-hero-band,
    .feature-metric-row {
      padding: 8px !important;
      margin-bottom: 10px !important;
      border-radius: 14px !important;
      box-shadow: none !important;
      background: #fff !important;
    }

    body.feature-page-active .topic-roadmap,
    body.feature-page-active .passage-library-grid,
    body.feature-page-active .review-mode-grid,
    .topic-grid,
    .passage-library-grid,
    .review-mode-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      padding-left: 0 !important;
    }

    body.feature-page-active .topic-roadmap::before,
    body.feature-page-active .topic-roadmap .topic-card::after,
    body.feature-page-active .topic-card::before,
    body.feature-page-active .passage-library-card::before,
    body.feature-page-active .review-mode-card::before {
      display: none !important;
    }

    body.feature-page-active .topic-btn,
    body.feature-page-active .passage-library-card,
    body.feature-page-active .review-mode-card,
    body.feature-page-active [data-feature-panel="topic"] .topic-btn,
    body.feature-page-active [data-feature-panel="review"] .review-mode-card {
      min-height: 0 !important;
      padding: 14px !important;
      border-radius: 16px !important;
      background: #fff !important;
      box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
    }

    body.feature-page-active .topic-name,
    body.feature-page-active .passage-thinker,
    body.feature-page-active .review-mode-title {
      font-size: 16px !important;
      line-height: 1.35 !important;
    }

    body.feature-page-active .topic-meta,
    body.feature-page-active .passage-library-meta,
    body.feature-page-active .review-mode-copy {
      font-size: 13px !important;
    }

    .question,
    .exam-question,
    body.exam-tab-active .exam-question,
    body.feature-page-active .question,
    body.feature-page-active .exam-question {
      font-size: clamp(19px, 4.5vw, 22px) !important;
      line-height: 1.62 !important;
      letter-spacing: -0.025em !important;
    }

    .question-box,
    .exam-question-box,
    body.exam-tab-active .exam-question-box,
    body.feature-page-active .question-box,
    body.feature-page-active .exam-question-box {
      padding: 18px !important;
      border-radius: 18px !important;
      box-shadow: none !important;
      border: 1px solid var(--line) !important;
      background: #fff !important;
      min-height: 0 !important;
    }

    .quiz-card,
    .topic-panel,
    .review-panel,
    #examPracticeBox {
      padding-bottom: 94px !important;
    }

    .learning-player-dock,
    .floating-answer-dock,
    body.exam-tab-active .exam-choice-area {
      position: fixed !important;
      left: 50% !important;
      bottom: var(--hy-dock-bottom) !important;
      z-index: 80 !important;
      width: var(--hy-dock-w) !important;
      transform: translateX(-50%) translateY(0) !important;
      padding: 8px !important;
      border: 1px solid rgba(226,232,240,.95) !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.94) !important;
      box-shadow: 0 18px 44px rgba(15,23,42,.14) !important;
      backdrop-filter: blur(18px) !important;
      transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease !important;
    }

    body.answer-dock-hidden .learning-player-dock,
    body.answer-dock-hidden .floating-answer-dock,
    body.answer-dock-hidden.exam-tab-active .exam-choice-area {
      transform: translateX(-50%) translateY(calc(100% + 24px)) !important;
      opacity: .12 !important;
      pointer-events: none !important;
    }

    .learning-player-dock .answer-grid,
    body.exam-tab-active .exam-choice-area .answer-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      position: static !important;
      width: 100% !important;
      transform: none !important;
    }

    .answer-btn,
    .learning-player-dock .answer-btn,
    body.exam-tab-active .exam-choice-area .answer-btn {
      height: 56px !important;
      min-height: 56px !important;
      border-radius: 16px !important;
      font-size: 27px !important;
      font-weight: 950 !important;
      box-shadow: none !important;
    }

    body.player-active .bottom-tabbar,
    body.solving-active .bottom-tabbar {
      display: none !important;
    }

    .learning-player-dock.feedback-correct,
    .learning-player-dock.feedback-wrong {
      grid-template-columns: minmax(0,1fr) auto !important;
      min-height: 58px !important;
    }

    .learning-player-dock .next-btn.show,
    .learning-player-dock .exam-next-btn.show {
      min-height: 42px !important;
      width: auto !important;
      border-radius: 14px !important;
      padding: 0 14px !important;
      margin: 0 !important;
    }

    .exam-result-area,
    body.exam-tab-active .exam-result-area {
      padding: 0 !important;
    }

    .exam-feedback.show,
    .feedback.show {
      margin-top: 12px !important;
      border-radius: 16px !important;
    }

    .passage-chip-row {
      gap: 7px !important;
      overflow-x: auto !important;
      padding-bottom: 4px !important;
    }

    .passage-chip {
      flex: 0 0 auto !important;
    }

    @media (max-width: 760px) {
      body { padding-left: 12px !important; padding-right: 12px !important; }
      .circle-progress,
      .study-hero-card .circle-progress { width: 60px !important; height: 60px !important; }
    }

  

    /* HYUNWOO FINAL PASS: bottom tab safari behavior + fixed OX dock + cleaner panels */
    :root {
      --hy-bottom-tab-h: 78px;
      --hy-ox-bottom-visible-tab: calc(var(--hy-bottom-tab-h) + 18px + env(safe-area-inset-bottom));
      --hy-ox-bottom-hidden-tab: calc(14px + env(safe-area-inset-bottom));
    }

    .bottom-tabbar {
      display: grid !important;
      transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease !important;
      will-change: transform;
    }

    body.player-active .bottom-tabbar,
    body.solving-active .bottom-tabbar {
      display: grid !important;
    }

    body.bottom-tabbar-hidden:not(.bottom-tab-always) .bottom-tabbar {
      transform: translateX(-50%) translateY(calc(100% + 28px)) !important;
      opacity: .14 !important;
      pointer-events: none !important;
    }

    body.answer-dock-hidden .learning-player-dock,
    body.answer-dock-hidden .floating-answer-dock,
    body.answer-dock-hidden.exam-tab-active .exam-choice-area {
      transform: translateX(-50%) translateY(0) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .learning-player-dock,
    .floating-answer-dock,
    body.exam-tab-active .exam-choice-area {
      bottom: var(--hy-ox-bottom-hidden-tab) !important;
      transition: bottom .28s cubic-bezier(.22,1,.36,1), transform .18s ease, opacity .18s ease !important;
    }

    body:not(.bottom-tabbar-hidden).player-active .learning-player-dock,
    body:not(.bottom-tabbar-hidden).solving-active .learning-player-dock,
    body:not(.bottom-tabbar-hidden).exam-tab-active .exam-choice-area {
      bottom: var(--hy-ox-bottom-visible-tab) !important;
    }

    .quiz-card,
    .topic-panel,
    .review-panel,
    #examPracticeBox {
      padding-bottom: 170px !important;
    }

    .study-hero-card .circle-progress {
      --ring: 9px;
      width: 124px !important;
      height: 124px !important;
      box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
    }

    .study-hero-card .circle-progress strong {
      font-size: 25px !important;
      transform: translate(-50%, -60%) !important;
      -webkit-text-stroke: .25px currentColor !important;
    }

    .study-hero-card .circle-progress span {
      bottom: 25px !important;
      font-size: 12px !important;
    }

    .dashboard-grid[data-study-home] .section-head {
      padding-right: 126px !important;
    }

    .dashboard-grid[data-study-home] #examStreakWrap {
      right: 14px !important;
      top: 16px !important;
      width: 104px !important;
      height: 104px !important;
      opacity: 1 !important;
    }

    .dashboard-grid[data-study-home] #examStreakWrap .mini-visual {
      width: 104px !important;
      height: 104px !important;
      font-size: 28px !important;
      box-shadow: 0 18px 40px rgba(15,23,42,.12) !important;
    }

    .dashboard-grid[data-study-home] #examStreakWrap .streak-smoke {
      display: none !important;
    }

    .today-task-card {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    [data-home-task="exam"],
    .dashboard-grid[data-study-home] #openExamBtn {
      display: none !important;
    }

    body.exam-tab-active .exam-player-card {
      display: block !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-question-box {
      min-height: 0 !important;
      padding: 18px 4px 24px !important;
      margin-bottom: 10px !important;
    }

    body.exam-tab-active .exam-question {
      max-width: none !important;
      font-size: clamp(20px, 4.3vw, 25px) !important;
      line-height: 1.62 !important;
      letter-spacing: -0.028em !important;
    }

    body.large-question-mode .question,
    body.large-question-mode .exam-question {
      font-size: clamp(22px, 4.8vw, 28px) !important;
    }

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0,1fr) 82px !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 78px !important;
      height: 78px !important;
      overflow: visible !important;
      box-shadow: 0 16px 34px rgba(15,23,42,.20) !important;
    }

    body.exam-tab-active .exam-status-badge::before {
      inset: -18px !important;
      z-index: -1 !important;
      opacity: .28 !important;
      filter: blur(.2px);
    }

    .exam-filter-dock {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .exam-filter-dock label {
      min-width: 0;
      display: grid;
      gap: 5px;
      padding: 9px;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .exam-filter-dock select,
    .settings-select {
      width: 100%;
      min-height: 34px;
      border: 1px solid #e5e7eb;
      border-radius: 11px;
      background: #f8fafc;
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
      padding: 0 8px;
    }

    .exam-filter-check {
      grid-template-columns: auto 1fr;
      align-items: center;
      align-content: center;
    }

    .exam-filter-check input {
      width: 16px;
      height: 16px;
    }

    .settings-select-row {
      grid-template-columns: 38px minmax(0,1fr) minmax(104px, 128px);
      cursor: default;
    }

    .quick-launch-grid {
      gap: 10px !important;
    }

    .quick-launch-btn,
    body.feature-page-active .topic-btn,
    body.feature-page-active .passage-library-card,
    body.feature-page-active .review-mode-card,
    body.feature-page-active .qna-item {
      border: 1px solid #e7edf5 !important;
      background: #fff !important;
      box-shadow: 0 10px 24px rgba(15,23,42,.045) !important;
    }

    .quick-launch-btn {
      min-height: 82px !important;
      border-radius: 18px !important;
      padding: 13px !important;
    }

    .quick-launch-title {
      font-size: 14px !important;
    }

    .quick-launch-sub {
      font-size: 11px !important;
      line-height: 1.35 !important;
    }

    body.feature-page-active .feature-toolbelt {
      padding: 10px !important;
      border: 1px solid #e7edf5 !important;
      border-radius: 18px !important;
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    body.feature-page-active .feature-search {
      min-height: 42px !important;
      border-radius: 14px !important;
      background: #fff !important;
    }

    body.feature-page-active .topic-grid,
    body.feature-page-active .passage-library-grid,
    body.feature-page-active .review-mode-grid {
      gap: 10px !important;
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding: 16px !important;
    }

    body.feature-page-active .study-feature-card {
      min-height: 0 !important;
    }

    @media (max-width: 520px) {
      .study-hero-card .circle-progress {
        width: 108px !important;
        height: 108px !important;
      }
      .dashboard-grid[data-study-home] #examStreakWrap,
      .dashboard-grid[data-study-home] #examStreakWrap .mini-visual {
        width: 92px !important;
        height: 92px !important;
      }
      .dashboard-grid[data-study-home] .section-head {
        padding-right: 108px !important;
      }
      .exam-filter-dock {
        grid-template-columns: 1fr;
      }
      body.exam-tab-active .exam-status-card {
        grid-template-columns: 1fr 72px !important;
      }
      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      }
      body.exam-tab-active .exam-status-badge {
        width: 70px !important;
        height: 70px !important;
      }
    }


    /* HYUNWOO UX PASS 2: 실제 피드백 반영 */
    :root {
      --hy-bottom-tab-h: 78px;
      --hy-ox-bottom-visible-tab: calc(var(--hy-bottom-tab-h) + 18px + env(safe-area-inset-bottom));
      --hy-ox-bottom-hidden-tab: calc(14px + env(safe-area-inset-bottom));
    }

    /* 학습 홈 중복 제거: 평가원 이어하기/오늘 할 일 버튼은 홈에서 숨기고 하단 탭 중심 */
    body:not(.exam-tab-active) .dashboard-grid[data-study-home],
    .today-task-card[data-study-home] {
      display: none !important;
    }

    /* 하단 탭바는 사파리식으로 천천히 사라짐 */
    .bottom-tabbar {
      transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .42s ease !important;
      will-change: transform, opacity;
    }

    body.bottom-tabbar-hidden:not(.bottom-tab-always) .bottom-tabbar {
      transform: translateX(-50%) translateY(calc(100% + 16px)) !important;
      opacity: 0 !important;
    }

    /* OX 버튼은 절대 숨기지 않음. 하단바가 보일 때만 위로 밀림 */
    body.answer-dock-hidden .learning-player-dock,
    body.answer-dock-hidden .floating-answer-dock,
    body.answer-dock-hidden.exam-tab-active .exam-choice-area {
      transform: translateX(-50%) translateY(0) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .learning-player-dock,
    .floating-answer-dock,
    body.exam-tab-active .exam-choice-area {
      bottom: var(--hy-ox-bottom-hidden-tab) !important;
      transition: bottom .46s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease, background .24s ease !important;
    }

    body:not(.bottom-tabbar-hidden).player-active .learning-player-dock,
    body:not(.bottom-tabbar-hidden).solving-active .learning-player-dock,
    body:not(.bottom-tabbar-hidden).exam-tab-active .exam-choice-area {
      bottom: var(--hy-ox-bottom-visible-tab) !important;
    }

    body.player-active .bottom-tabbar,
    body.solving-active .bottom-tabbar {
      display: grid !important;
    }

    /* 평가원 학습: 스크롤 의존 줄이기, 데스크톱/태블릿 별도 폭 */
    body.exam-tab-active .app {
      max-width: min(760px, calc(100vw - 28px)) !important;
    }

    body.exam-tab-active .dashboard-grid[data-study-home] {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    body.exam-tab-active .exam-tab-card .card-inner {
      padding: 14px !important;
    }

    body.exam-tab-active .exam-player-head,
    body.exam-tab-active .exam-more-menu,
    body.exam-tab-active .exam-control-copy,
    body.exam-tab-active .mini-card-actions,
    body.exam-tab-active .home-exam-title {
      display: none !important;
    }

    body.exam-tab-active .exam-tab-title {
      display: inline !important;
    }

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0,1fr) 80px !important;
      padding: 10px !important;
      border-radius: 18px !important;
      margin-bottom: 8px !important;
    }

    body.exam-tab-active .exam-status-grid {
      grid-template-columns: repeat(4, minmax(0,1fr)) !important;
      gap: 6px !important;
    }

    body.exam-tab-active .exam-status-item {
      padding: 8px 7px !important;
      border-radius: 12px !important;
    }

    body.exam-tab-active .exam-status-item span {
      font-size: 10px !important;
      margin-bottom: 3px !important;
    }

    body.exam-tab-active .exam-status-item strong {
      font-size: 14px !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 76px !important;
      height: 76px !important;
      font-size: 15px !important;
    }

    body.exam-tab-active #examPracticeBox {
      gap: 8px !important;
      padding-bottom: 168px !important;
    }

    body.exam-tab-active .exam-player-card {
      border-radius: 18px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-question-box {
      padding: 13px 14px 14px !important;
      margin: 0 !important;
      border-radius: 18px !important;
    }

    body.exam-tab-active .exam-question-box .question-label {
      margin-bottom: 6px !important;
      font-size: 11px !important;
    }

    body.exam-tab-active .exam-question {
      font-size: clamp(17px, 2.4vw, 20px) !important;
      line-height: 1.5 !important;
      font-weight: 900 !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active .inline-cycle-count {
      margin-top: 7px !important;
      font-size: 11px !important;
    }

    body.exam-tab-active .exam-filter-dock {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 6px !important;
      margin-top: 8px !important;
    }

    @media (min-width: 820px) {
      body.exam-tab-active .app { max-width: 820px !important; }
      body.exam-tab-active .exam-question { font-size: 19px !important; }
      body.exam-tab-active .exam-choice-area { width: min(560px, calc(100vw - 28px)) !important; }
      body.exam-tab-active .exam-filter-dock label { padding: 7px !important; }
    }

    @media (max-width: 560px) {
      body.exam-tab-active .exam-status-card { grid-template-columns: 1fr 68px !important; }
      body.exam-tab-active .exam-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
      body.exam-tab-active .exam-status-badge { width: 66px !important; height: 66px !important; }
      body.exam-tab-active .exam-filter-dock { grid-template-columns: 1fr !important; }
    }

    /* 오답노트: 번잡한 AI/망각 문구 제거 + 버튼 정리 */
    .wrong-panel:not(.hidden) {
      margin: 8px 0 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .wrong-insight-board.refined-wrong-summary {
      display: block !important;
      margin-bottom: 8px !important;
    }

    .wrong-summary-card {
      padding: 12px !important;
      border-radius: 16px !important;
      background: #f8fafc !important;
      border: 1px solid #e7edf5 !important;
      box-shadow: none !important;
    }

    .wrong-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 7px;
      margin-top: 8px;
    }

    .wrong-summary-grid div {
      min-width: 0;
      border: 1px solid #e7edf5;
      border-radius: 13px;
      background: #fff;
      padding: 8px;
    }

    .wrong-summary-grid span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      margin-bottom: 3px;
      white-space: nowrap;
    }

    .wrong-summary-grid strong {
      display: block;
      color: var(--text);
      font-size: 15px;
      font-weight: 950;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrong-filter-dock.refined-wrong-filter {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 10px !important;
      border-radius: 16px !important;
      box-shadow: none !important;
    }

    .wrong-filter-actions {
      display: flex !important;
      gap: 5px !important;
      flex-wrap: wrap !important;
      justify-content: flex-end !important;
    }

    .wrong-item {
      border-radius: 16px !important;
      padding: 12px !important;
      box-shadow: none !important;
      background: #fff !important;
    }

    .wrong-top {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 5px !important;
      margin-bottom: 7px !important;
    }

    .wrong-top span,
    .wrong-source {
      font-size: 10px !important;
      color: var(--muted) !important;
    }

    .wrong-question {
      font-size: 14px !important;
      line-height: 1.45 !important;
      margin-bottom: 7px !important;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .wrong-actions {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 6px !important;
      margin-top: 8px !important;
    }

    .wrong-toggle-btn,
    .wrong-delete-btn {
      min-height: 32px !important;
      width: auto !important;
      padding: 0 10px !important;
      border-radius: 11px !important;
      font-size: 11px !important;
      white-space: nowrap !important;
    }

    .wrong-delete-btn {
      background: #fff !important;
      color: #9f1239 !important;
    }

    .wrong-explanation {
      margin-top: 8px !important;
      border-radius: 13px !important;
      font-size: 13px !important;
      line-height: 1.6 !important;
    }

    .wrong-quickfire-btn {
      min-height: 42px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      box-shadow: none !important;
    }

    /* 명예의 전당 집계 표시 안정화 */
    .leaderboard-score span {
      white-space: nowrap;
    }

    /* 기록 탭: 수학대왕식 무채색 요약 + 히트맵 회색 */
    .year-cell { background: #f1f5f9 !important; }
    .year-cell.l1 { background: #d1d5db !important; }
    .year-cell.l2 { background: #6b7280 !important; }
    .year-cell.l3 { background: #111827 !important; }

    .profile-summary {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      margin-bottom: 12px !important;
    }

    .profile-hero,
    .profile-mini-panel,
    .profile-section-card {
      border: 1px solid #e7edf5 !important;
      border-radius: 18px !important;
      background: #fff !important;
      box-shadow: none !important;
      padding: 14px !important;
    }

    .profile-hero {
      min-height: 0 !important;
      background: #fff !important;
    }

    .profile-kicker {
      color: var(--muted) !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      letter-spacing: 0 !important;
    }

    .profile-main-number {
      margin-top: 4px !important;
      font-size: 34px !important;
      letter-spacing: -0.06em !important;
      color: var(--text) !important;
    }

    .profile-main-caption {
      margin-top: 3px !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 850 !important;
    }

    .profile-recent-card {
      order: 99 !important;
    }

    .archive-btn {
      border-radius: 15px !important;
      box-shadow: none !important;
    }

    @media (min-width: 700px) and (max-width: 900px) {
      body.profile-tab-active .app { max-width: 760px !important; }
      .profile-summary { grid-template-columns: .85fr 1.15fr !important; }
      .year-heatmap { grid-template-columns: repeat(14, minmax(30px, 1fr)) !important; }
    }

    @media (min-width: 901px) {
      .year-heatmap { grid-template-columns: repeat(21, minmax(30px, 1fr)) !important; }
    }

    /* 주제별: 진행도 원/주의/안정 제거 */
    body.feature-page-active [data-feature-panel="topic"] .topic-status-orb,
    body.feature-page-active [data-feature-panel="topic"] .topic-progress-track,
    body.feature-page-active [data-feature-panel="topic"] .topic-stat-row,
    body.feature-page-active [data-feature-panel="topic"] .topic-risk-badge,
    body.feature-page-active [data-feature-panel="topic"] .topic-course-badge,
    body.feature-page-active [data-feature-panel="topic"] .topic-achievement-row {
      display: none !important;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-btn {
      min-height: 78px !important;
      gap: 6px !important;
      padding: 13px !important;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-course-top {
      padding-right: 0 !important;
    }

    body.feature-page-active [data-feature-panel="topic"] .topic-course-footer {
      justify-content: flex-end !important;
      margin-top: 0 !important;
    }

    /* 복습/제시문/Q&A: 공백만 많은 카드 축소 */
    body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-card {
      min-height: 74px !important;
      padding: 12px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-title {
      font-size: 15px !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-copy {
      font-size: 12px !important;
      line-height: 1.3 !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-action {
      min-height: 34px !important;
      justify-content: center !important;
      text-align: center !important;
      align-self: stretch !important;
    }

    .review-mission-stats,
    body.feature-page-active [data-feature-panel="review"] .review-mission-stats {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 7px !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats > div {
      padding: 9px !important;
      border-radius: 13px !important;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-chip-row {
      flex-wrap: wrap !important;
      overflow: visible !important;
      margin-bottom: 6px !important;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-chip {
      flex: 0 1 auto !important;
      min-height: 32px !important;
      border-radius: 12px !important;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-grid {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      overflow: visible !important;
    }

    body.feature-page-active [data-feature-panel="passage"] .passage-library-card {
      min-width: 0 !important;
      overflow: hidden !important;
      padding: 12px !important;
    }

    .passage-excerpt {
      font-size: 12px !important;
      line-height: 1.45 !important;
      -webkit-line-clamp: 2 !important;
    }

    @media (min-width: 760px) {
      body.feature-page-active .app { max-width: 760px !important; }
      body.feature-page-active [data-feature-panel="topic"] .topic-roadmap,
      body.feature-page-active [data-feature-panel="passage"] .passage-library-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      }
      body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      }
    }

    /* 바로가기 문구 잘림 방지 */
    .quick-launch-btn {
      align-content: center !important;
      overflow: visible !important;
    }

    .quick-launch-title,
    .quick-launch-sub {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: block !important;
      max-width: 100% !important;
      word-break: keep-all !important;
    }

    .quick-launch-sub {
      font-size: 12px !important;
      line-height: 1.35 !important;
    }

    /* HYUNWOO PROFESSIONAL LEARNING APP PASS v4
       화면 밀도, 바로가기/기능 탭, 평가원 플레이어, 복습/제시문/Q&A를 전문 학습앱 톤으로 재정리 */
    :root {
      --hy-app-mobile: 560px;
      --hy-app-tablet: 760px;
      --hy-app-desktop: 980px;
      --hy-card-r: 22px;
      --hy-card-r-sm: 16px;
      --hy-border: rgba(226, 232, 240, .92);
      --hy-soft-bg: #f8fafc;
      --hy-paper: #ffffff;
      --hy-ink: #0f172a;
      --hy-sub: #64748b;
      --hy-shadow-1: 0 10px 24px rgba(15, 23, 42, .055);
      --hy-shadow-2: 0 18px 44px rgba(15, 23, 42, .075);
    }

    body {
      background:
        linear-gradient(180deg, #f8fafc 0%, #f3f5f8 56%, #eef2f7 100%) !important;
    }

    .app {
      max-width: var(--hy-app-mobile) !important;
    }

    body.exam-tab-active .app,
    body.feature-page-active .app,
    body.profile-tab-active .app,
    body.hall-tab-active .app {
      max-width: min(var(--hy-app-tablet), calc(100vw - 28px)) !important;
    }

    .card,
    .study-feature-card,
    .mini-card,
    .profile-tab-card,
    .hall-tab-card {
      border-color: var(--hy-border) !important;
      border-radius: var(--hy-card-r) !important;
      box-shadow: var(--hy-shadow-1) !important;
    }

    .card:hover,
    .study-feature-card:hover {
      transform: none !important;
      box-shadow: var(--hy-shadow-1) !important;
    }

    .section-title {
      letter-spacing: -0.035em !important;
    }

    .section-desc {
      line-height: 1.55 !important;
      word-break: keep-all !important;
    }

    /* 홈 바로가기: 기능 카드가 아니라 앱 모듈 런처처럼 */
    .quick-launch-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin-bottom: 14px !important;
    }

    .quick-launch-btn {
      min-height: 82px !important;
      padding: 14px !important;
      border-radius: 18px !important;
      border: 1px solid var(--hy-border) !important;
      background: linear-gradient(180deg, #fff, #f9fafb) !important;
      box-shadow: none !important;
      display: grid !important;
      grid-template-columns: 34px 1fr !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 10px !important;
      text-align: left !important;
    }

    .quick-launch-icon {
      grid-row: 1 / 3 !important;
      width: 34px !important;
      height: 34px !important;
      border-radius: 12px !important;
      background: #0f172a !important;
      color: #fff !important;
      font-size: 16px !important;
      display: inline-grid !important;
      place-items: center !important;
    }

    .quick-launch-title {
      font-size: 15px !important;
      line-height: 1.25 !important;
      font-weight: 950 !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    .quick-launch-sub {
      font-size: 12.5px !important;
      line-height: 1.35 !important;
      color: #64748b !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: block !important;
    }

    /* 기능 탭: 별도 html 느낌 제거, 같은 앱 내부의 상단 세그먼트로 */
    body.feature-page-active .topbar {
      display: flex !important;
    }

    body.feature-page-active .bottom-tabbar {
      display: grid !important;
    }

    body.feature-page-active .study-feature-nav {
      position: sticky !important;
      top: 0 !important;
      z-index: 45 !important;
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      grid-template-areas:
        "home title"
        "switch switch" !important;
      gap: 10px !important;
      align-items: center !important;
      margin: 0 0 12px !important;
      padding: 10px 0 12px !important;
      background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(248,250,252,.88)) !important;
      backdrop-filter: blur(16px) !important;
    }

    .study-home-btn {
      grid-area: home !important;
      height: 38px !important;
      padding: 0 12px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      color: #334155 !important;
      box-shadow: none !important;
    }

    .study-feature-title {
      grid-area: title !important;
      font-size: 20px !important;
      font-weight: 950 !important;
      letter-spacing: -0.035em !important;
      min-width: 0 !important;
    }

    .feature-switcher {
      grid-area: switch !important;
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
      padding: 4px !important;
      border: 1px solid var(--hy-border) !important;
      border-radius: 18px !important;
      background: #eef2f7 !important;
    }

    .feature-switch-btn {
      height: 38px !important;
      border: 0 !important;
      border-radius: 14px !important;
      background: transparent !important;
      color: #64748b !important;
      font-size: 13px !important;
      font-weight: 950 !important;
      cursor: pointer !important;
    }

    .feature-switch-btn.active {
      background: #fff !important;
      color: #0f172a !important;
      box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
    }

    body.feature-page-active .study-feature-card {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      margin-bottom: 110px !important;
    }

    body.feature-page-active .study-feature-card .card-inner {
      padding: 0 !important;
      background: transparent !important;
    }

    body.feature-page-active .study-feature-card .section-head {
      margin: 0 0 12px !important;
      padding: 16px !important;
      border: 1px solid var(--hy-border) !important;
      border-radius: 20px !important;
      background: #fff !important;
      box-shadow: var(--hy-shadow-1) !important;
    }

    body.feature-page-active .study-feature-card .section-title {
      font-size: 22px !important;
      line-height: 1.25 !important;
    }

    body.feature-page-active .study-feature-card .section-desc {
      font-size: 13px !important;
      margin-top: 4px !important;
    }

    body.feature-page-active .feature-toolbelt {
      display: flex !important;
      gap: 8px !important;
      padding: 0 !important;
      margin: 0 0 12px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .feature-search {
      min-height: 44px !important;
      border-radius: 16px !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    /* 주제별: 진행도/주의/안정 류 제거, 코스 선택만 남김 */
    .topic-status,
    .topic-course-badge,
    .topic-progress-track,
    .topic-progress-fill,
    .topic-alert,
    .topic-risk,
    .topic-stability,
    .topic-btn .topic-state,
    .topic-btn .topic-status-label,
    .topic-btn .topic-level,
    .topic-btn .topic-progress {
      display: none !important;
    }

    .topic-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    .topic-card,
    .topic-btn {
      min-height: 88px !important;
      padding: 15px !important;
      border-radius: 18px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      box-shadow: none !important;
      text-align: left !important;
    }

    .topic-name {
      font-size: 15.5px !important;
      line-height: 1.35 !important;
      font-weight: 950 !important;
      white-space: normal !important;
      word-break: keep-all !important;
    }

    .topic-meta {
      font-size: 12.5px !important;
      line-height: 1.4 !important;
      color: #64748b !important;
    }

    /* 복습: 공백 큰 카드 제거 */
    .review-mode-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin: 0 0 12px !important;
    }

    .review-mode-card {
      min-height: 76px !important;
      padding: 14px !important;
      border-radius: 18px !important;
      background: #fff !important;
      border: 1px solid var(--hy-border) !important;
      box-shadow: none !important;
      text-align: left !important;
    }

    .review-mode-title {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      font-size: 15px !important;
      line-height: 1.3 !important;
      font-weight: 950 !important;
    }

    .review-count-pill {
      min-width: 28px !important;
      height: 24px !important;
      border-radius: 999px !important;
      display: inline-grid !important;
      place-items: center !important;
      padding: 0 8px !important;
      background: #0f172a !important;
      color: #fff !important;
      font-size: 12px !important;
    }

    .review-mode-copy {
      margin-top: 5px !important;
      font-size: 12.5px !important;
      color: #64748b !important;
      line-height: 1.35 !important;
    }

    .review-mission-strip {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0,1fr)) !important;
      gap: 8px !important;
      margin: 0 0 12px !important;
    }

    .review-mission-strip > div {
      border-radius: 16px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      padding: 10px !important;
      text-align: center !important;
    }

    .review-preview-board,
    .qna-board-shell,
    .qna-detail,
    .qna-form {
      border-radius: 20px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      box-shadow: var(--hy-shadow-1) !important;
    }

    .review-preview-list,
    .qna-list {
      display: grid !important;
      gap: 8px !important;
    }

    /* 제시문: 가로 잘림 금지, 카드형 라이브러리 */
    .passage-chip-row {
      display: flex !important;
      flex-wrap: wrap !important;
      overflow: visible !important;
      gap: 7px !important;
      padding: 0 !important;
      margin-bottom: 12px !important;
    }

    .passage-chip {
      flex: 0 0 auto !important;
      height: 34px !important;
      border-radius: 999px !important;
      padding: 0 11px !important;
      background: #fff !important;
      border: 1px solid var(--hy-border) !important;
      box-shadow: none !important;
    }

    .passage-library-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .passage-library-card {
      min-height: 96px !important;
      padding: 15px !important;
      border-radius: 18px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    .passage-card-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
    }

    .passage-thinker,
    .passage-keyword {
      max-width: none !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    .passage-excerpt {
      margin-top: 9px !important;
      font-size: 14px !important;
      line-height: 1.55 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    /* Q&A: 게시판 느낌 제거, 학습앱 피드 */
    .qna-board-head {
      display: none !important;
    }

    .qna-item {
      padding: 14px !important;
      border-radius: 16px !important;
      border: 1px solid var(--hy-border) !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    .qna-item .qna-question {
      font-size: 14.5px !important;
      line-height: 1.5 !important;
      -webkit-line-clamp: 2 !important;
    }

    /* 평가원: 스크롤 없이 보기 위한 밀도. OX dock은 고정 유지 */
    body.exam-tab-active .exam-tab-card {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-tab-card .card-inner {
      padding: 0 !important;
      background: transparent !important;
    }

    body.exam-tab-active .exam-player-stage {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      gap: 12px !important;
      align-items: stretch !important;
      margin-bottom: 12px !important;
    }

    body.exam-tab-active .exam-player-head,
    body.exam-tab-active .exam-status-card,
    body.exam-tab-active .exam-filter-dock,
    body.exam-tab-active .exam-player-card {
      border: 1px solid var(--hy-border) !important;
      border-radius: 20px !important;
      background: #fff !important;
      box-shadow: var(--hy-shadow-1) !important;
    }

    body.exam-tab-active .exam-player-head {
      padding: 14px 15px !important;
      margin: 0 !important;
    }

    body.exam-tab-active .exam-player-title {
      font-size: 22px !important;
      line-height: 1.2 !important;
    }

    body.exam-tab-active .exam-player-subtitle {
      font-size: 13px !important;
      margin-top: 4px !important;
    }

    body.exam-tab-active .exam-status-card {
      min-width: 176px !important;
      padding: 12px !important;
      margin: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      gap: 10px !important;
      align-items: center !important;
      background: radial-gradient(circle at 82% 18%, rgba(15,23,42,.06), transparent 35%), #fff !important;
    }

    body.exam-tab-active .exam-status-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 6px !important;
    }

    body.exam-tab-active .exam-status-item {
      padding: 6px !important;
      border-radius: 12px !important;
      background: #f8fafc !important;
    }

    body.exam-tab-active .exam-status-item span {
      font-size: 10.5px !important;
    }

    body.exam-tab-active .exam-status-item strong {
      font-size: 14px !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 74px !important;
      height: 74px !important;
      border-radius: 50% !important;
      display: inline-grid !important;
      place-items: center !important;
      background: #0f172a !important;
      color: #fff !important;
      font-size: 16px !important;
      font-weight: 950 !important;
      box-shadow: 0 16px 34px rgba(15,23,42,.18) !important;
      position: relative !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-status-badge::after {
      content: "" !important;
      position: absolute !important;
      inset: -18px !important;
      background: radial-gradient(circle, rgba(255,255,255,.22), transparent 45%) !important;
      filter: blur(4px) !important;
      opacity: .7 !important;
    }

    body.exam-tab-active .exam-filter-dock {
      padding: 10px !important;
      margin-bottom: 12px !important;
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0,1fr)) !important;
      gap: 8px !important;
    }

    body.exam-tab-active .exam-filter-dock label,
    body.exam-tab-active .exam-filter-dock .exam-repeat-control {
      min-height: 42px !important;
      border-radius: 14px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.8) !important;
      padding: 8px 10px !important;
    }

    body.exam-tab-active .exam-player-card {
      padding: 14px !important;
      margin-bottom: 170px !important;
    }

    body.exam-tab-active .exam-question-box {
      padding: 14px !important;
      border-radius: 16px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.86) !important;
    }

    body.exam-tab-active .exam-question {
      font-size: 18.5px !important;
      line-height: 1.55 !important;
      margin: 8px 0 0 !important;
      letter-spacing: -0.025em !important;
    }

    body.large-question-mode.exam-tab-active .exam-question {
      font-size: 21px !important;
    }

    body.exam-tab-active .question-label,
    body.exam-tab-active .inline-cycle-count {
      font-size: 12px !important;
      line-height: 1.25 !important;
    }

    body.exam-tab-active .multi-progress {
      margin: 10px 0 !important;
      gap: 6px !important;
    }

    body.exam-tab-active .multi-target-box {
      padding: 12px !important;
      border-radius: 16px !important;
      background: #fff !important;
      border: 1px solid var(--hy-border) !important;
    }

    .learning-player-dock,
    .floating-answer-dock,
    body.exam-tab-active .exam-choice-area {
      width: min(520px, calc(100vw - 24px)) !important;
      transition: bottom .42s cubic-bezier(.16, 1, .3, 1), transform .42s cubic-bezier(.16, 1, .3, 1), opacity .32s ease !important;
    }

    .bottom-tabbar {
      transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .38s ease !important;
    }

    body.bottom-tabbar-hidden:not(.bottom-tab-always) .bottom-tabbar {
      transform: translateX(-50%) translateY(calc(100% + 20px)) !important;
      opacity: .06 !important;
    }

    /* 기록/명예도 대시보드 배너 냄새 제거 */
    .profile-tab-card,
    .hall-tab-card {
      background: #fff !important;
    }

    .year-heatmap .heat-day,
    .heat-day {
      border-color: rgba(226,232,240,.95) !important;
    }

    .heat-day[data-level="1"] { background: #e5e7eb !important; }
    .heat-day[data-level="2"] { background: #cbd5e1 !important; }
    .heat-day[data-level="3"] { background: #64748b !important; }
    .heat-day[data-level="4"] { background: #111827 !important; }

    @media (min-width: 760px) {
      .app {
        max-width: var(--hy-app-tablet) !important;
      }
      .quick-launch-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
      .quick-launch-btn {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        min-height: 112px !important;
        text-align: left !important;
      }
      .quick-launch-icon {
        grid-row: auto !important;
      }
      .topic-grid,
      .passage-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (min-width: 1024px) {
      body {
        padding: 34px 24px 104px !important;
      }
      body.exam-tab-active .app,
      body.feature-page-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app {
        max-width: var(--hy-app-desktop) !important;
      }
      body.exam-tab-active .exam-player-stage,
      body.exam-tab-active .exam-filter-dock,
      body.exam-tab-active .exam-player-card,
      body.feature-page-active .study-feature-nav,
      body.feature-page-active .study-feature-card .section-head,
      body.feature-page-active .feature-toolbelt,
      body.feature-page-active .topic-grid,
      body.feature-page-active .passage-library-grid,
      body.feature-page-active .review-mode-grid,
      body.feature-page-active .review-preview-board,
      body.feature-page-active .qna-board-shell,
      body.feature-page-active .qna-detail,
      body.feature-page-active .qna-form {
        max-width: 860px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      body.exam-tab-active .exam-player-card {
        min-height: 260px !important;
      }
      .bottom-tabbar {
        width: min(640px, calc(100vw - 32px)) !important;
      }
    }

    @media (max-width: 640px) {
      .app,
      body.exam-tab-active .app,
      body.feature-page-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app {
        max-width: min(var(--hy-app-mobile), calc(100vw - 24px)) !important;
      }
      .feature-switcher {
        overflow-x: auto !important;
        grid-template-columns: repeat(4, max-content) !important;
        justify-content: start !important;
        padding: 4px !important;
      }
      .feature-switch-btn {
        min-width: 72px !important;
      }
      body.exam-tab-active .exam-player-stage {
        grid-template-columns: 1fr !important;
      }
      body.exam-tab-active .exam-status-card {
        min-width: 0 !important;
      }
      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 1fr !important;
      }
      .review-mission-strip {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      }
      .review-mode-grid,
      .topic-grid,
      .passage-library-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* HYUNWOO DESKTOP/TABLET RATIO RESCUE PASS
       - fixes desktop overflow/cropping from stacked mobile overrides
       - keeps mobile app feel, but gives feature/exam tabs a proper wide shell
    */
    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      align-items: flex-start;
    }

    .app,
    .card,
    .card-inner,
    .study-feature-card,
    .study-feature-card .card-inner,
    .exam-tab-card,
    .exam-tab-card .card-inner,
    .practice-panel,
    .topic-panel,
    .review-panel,
    .passage-panel,
    .qna-panel,
    .feature-toolbelt,
    .topic-grid,
    .passage-library-grid,
    .review-mode-grid,
    .qna-list,
    .exam-question-box,
    .question-box {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .topbar,
    .dashboard-grid,
    .study-feature-nav,
    .study-feature-card,
    .bottom-tabbar,
    .learning-player-dock {
      box-sizing: border-box;
    }

    .exam-question-box .inline-cycle-count,
    .question-box .inline-cycle-count,
    body.exam-tab-active .inline-cycle-count,
    body.feature-page-active .inline-cycle-count {
      position: static !important;
      display: block !important;
      margin-top: 10px !important;
      text-align: right !important;
      white-space: nowrap !important;
      transform: none !important;
    }

    body.exam-tab-active .exam-question-box,
    body.feature-page-active .question-box {
      display: block !important;
      overflow: visible !important;
      padding-bottom: 18px !important;
    }

    body.exam-tab-active .exam-question,
    body.feature-page-active .question {
      overflow-wrap: anywhere !important;
      word-break: keep-all !important;
    }

    .feature-switcher,
    .feature-filter-row {
      max-width: 100% !important;
      overflow: visible !important;
    }

    .feature-switch-btn,
    .feature-filter-btn {
      min-width: 0 !important;
      white-space: nowrap !important;
    }

    @media (min-width: 901px) {
      body {
        padding: 28px 28px 104px !important;
      }

      .app {
        width: min(1120px, calc(100vw - 56px)) !important;
        max-width: 1120px !important;
        margin: 0 auto !important;
      }

      .topbar {
        width: 100% !important;
        margin: 0 auto 22px !important;
        padding-inline: 2px !important;
      }

      .dashboard-grid[data-study-home] {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr) !important;
        gap: 16px !important;
        align-items: stretch !important;
      }

      .quick-launch-grid[data-study-home] {
        width: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      .quick-launch-btn {
        min-height: 86px !important;
        padding: 14px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-content: center !important;
      }

      .quick-launch-title {
        font-size: 14px !important;
      }

      .quick-launch-sub {
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
      }

      .bottom-tabbar {
        width: min(720px, calc(100vw - 56px)) !important;
        bottom: 18px !important;
      }

      body.feature-page-active .app,
      body.exam-tab-active .app {
        width: min(1120px, calc(100vw - 56px)) !important;
        max-width: 1120px !important;
      }

      body.feature-page-active .study-feature-nav {
        width: min(940px, 100%) !important;
        margin: 0 auto 14px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px !important;
      }

      body.feature-page-active .study-feature-title {
        text-align: left !important;
        font-size: 24px !important;
        line-height: 1.1 !important;
      }

      body.feature-page-active .feature-switcher {
        width: min(420px, 100%) !important;
        justify-self: end !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      body.feature-page-active .study-feature-card {
        width: min(940px, 100%) !important;
        margin: 0 auto 18px !important;
      }

      body.feature-page-active .study-feature-card .card-inner {
        padding: 22px !important;
      }

      body.feature-page-active .section-head {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
      }

      body.feature-page-active .section-title {
        font-size: 28px !important;
        line-height: 1.1 !important;
      }

      body.feature-page-active .section-desc {
        font-size: 14px !important;
        line-height: 1.45 !important;
      }

      body.feature-page-active .feature-toolbelt {
        display: grid !important;
        grid-template-columns: minmax(260px, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 16px !important;
      }

      body.feature-page-active .feature-filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
      }

      .topic-grid,
      body.feature-page-active .topic-grid,
      .passage-library-grid,
      body.feature-page-active .passage-library-grid,
      .review-mode-grid,
      body.feature-page-active .review-mode-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
      }

      body.feature-page-active .topic-panel:not(.hidden),
      body.feature-page-active .review-panel:not(.hidden),
      body.feature-page-active .qna-panel:not(.hidden),
      body.feature-page-active .passage-panel:not(.hidden) {
        width: 100% !important;
        max-width: 100% !important;
      }

      body.exam-tab-active .exam-tab-card {
        width: min(960px, 100%) !important;
        margin: 0 auto !important;
      }

      body.exam-tab-active .exam-tab-card .card-inner {
        min-height: auto !important;
        padding: 22px !important;
        border-radius: 26px !important;
      }

      body.exam-tab-active #examPracticeBox {
        width: min(820px, 100%) !important;
        margin: 0 auto !important;
        gap: 14px !important;
        padding-bottom: 112px !important;
        min-height: auto !important;
      }

      body.exam-tab-active .exam-player-stage {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
      }

      body.exam-tab-active .exam-status-card {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 92px !important;
        align-items: center !important;
        padding: 14px !important;
      }

      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }

      body.exam-tab-active .exam-status-badge {
        width: 88px !important;
        height: 88px !important;
        font-size: 18px !important;
      }

      body.exam-tab-active .exam-question-box {
        width: 100% !important;
        min-height: 156px !important;
        padding: 22px !important;
        border-radius: 22px !important;
      }

      body.exam-tab-active .exam-question {
        max-width: 100% !important;
        font-size: clamp(21px, 2.1vw, 27px) !important;
        line-height: 1.55 !important;
      }

      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: min(820px, 100%) !important;
        margin-inline: auto !important;
      }

      .learning-player-dock {
        width: min(720px, calc(100vw - 56px)) !important;
      }
    }

    @media (min-width: 701px) and (max-width: 900px) {
      body {
        padding: 22px 20px 100px !important;
      }

      .app {
        width: min(760px, calc(100vw - 40px)) !important;
        max-width: 760px !important;
        margin: 0 auto !important;
      }

      .bottom-tabbar,
      .learning-player-dock {
        width: min(680px, calc(100vw - 40px)) !important;
      }

      body.feature-page-active .study-feature-nav {
        width: 100% !important;
        grid-template-columns: auto minmax(0,1fr) !important;
        grid-template-areas:
          "back title"
          "switch switch" !important;
        gap: 10px !important;
      }

      body.feature-page-active .feature-switcher {
        grid-area: switch !important;
        width: 100% !important;
      }

      body.feature-page-active .feature-toolbelt {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      .topic-grid,
      body.feature-page-active .topic-grid,
      .passage-library-grid,
      body.feature-page-active .passage-library-grid,
      .review-mode-grid,
      body.feature-page-active .review-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      body.exam-tab-active #examPracticeBox {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
      }

      body.exam-tab-active .exam-question {
        font-size: clamp(21px, 3.1vw, 26px) !important;
      }
    }

    @media (max-width: 700px) {
      body {
        padding-left: 14px !important;
        padding-right: 14px !important;
      }

      .app {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
      }

      .bottom-tabbar,
      .learning-player-dock {
        width: min(560px, calc(100vw - 24px)) !important;
      }

      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0,1fr) 76px !important;
      }

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

      body.exam-tab-active .exam-status-badge {
        width: 72px !important;
        height: 72px !important;
        font-size: 16px !important;
      }

      body.exam-tab-active .exam-question {
        font-size: clamp(20px, 5.2vw, 24px) !important;
      }
    }


    /* HYUNWOO BUGFIX PASS 4: desktop ratio / feature-tab leakage / leaderboard count sync */
    .bottom-tabbar {
      min-height: 58px !important;
      padding: 6px !important;
      border-radius: 22px !important;
      background: rgba(255, 255, 255, 0.985) !important;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .bottom-tab-btn {
      min-height: 42px !important;
      border-radius: 16px !important;
    }

    body.feature-page-active .feature-switcher,
    body.feature-page-active .feature-tabs,
    body.feature-page-active .quick-launch-grid[data-study-home],
    body.feature-page-active [data-study-home] {
      display: none !important;
    }

    body.feature-page-active .study-feature-nav {
      width: min(860px, 100%) !important;
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 10px !important;
      margin: 0 auto 14px !important;
      padding: 10px 12px !important;
      border-radius: 20px !important;
      box-shadow: none !important;
    }

    body.feature-page-active .study-feature-title {
      font-size: clamp(22px, 3vw, 28px) !important;
      line-height: 1.15 !important;
      text-align: left !important;
    }

    body.feature-page-active .study-feature-card {
      width: min(860px, 100%) !important;
      margin: 0 auto 86px !important;
      border: 1px solid rgba(226, 232, 240, 0.9) !important;
      background: #fff !important;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
    }

    body.feature-page-active .study-feature-card .card-inner,
    body.feature-page-active [data-feature-panel] .card-inner {
      padding: clamp(14px, 2.4vw, 20px) !important;
      background: #fff !important;
    }

    body.feature-page-active .study-feature-card .section-head {
      display: none !important;
    }

    body.feature-page-active .feature-toolbelt {
      margin: 0 0 12px !important;
      padding: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    body.feature-page-active .topic-grid,
    body.feature-page-active .review-mode-grid,
    body.feature-page-active .passage-library-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
      gap: 10px !important;
    }

    .qna-excerpt,
    .qna-answer-snippet,
    .qna-summary,
    .qna-answer-card .qna-excerpt {
      display: none !important;
    }

    .quick-launch-icon {
      background: #f1f5f9 !important;
      color: #334155 !important;
      box-shadow: none !important;
    }

    .quick-launch-btn:hover .quick-launch-icon,
    .quick-launch-btn:focus-visible .quick-launch-icon {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }

    .study-hero-card .circle-progress,
    .circle-progress {
      width: 108px !important;
      height: 108px !important;
      --ring: 8px !important;
    }

    .study-hero-card .circle-progress strong,
    .circle-progress strong {
      font-size: 22px !important;
    }

    .study-hero-card .circle-progress span,
    .circle-progress span {
      font-size: 11px !important;
      bottom: 20px !important;
    }

    body.daily-learning-active .study-hero-card {
      width: min(820px, 100%) !important;
      margin: 0 auto 14px !important;
    }

    body.daily-learning-active .study-hero-card .card-inner {
      padding: 14px !important;
    }

    body.daily-learning-active .daily-hero {
      min-height: 84px !important;
      padding: 0 !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 12px !important;
    }

    body.daily-learning-active .daily-title {
      font-size: 18px !important;
    }

    body.daily-learning-active .daily-desc,
    body.daily-learning-active .daily-hero-meta,
    body.daily-learning-active .daily-date {
      display: none !important;
    }

    body.daily-learning-active .study-hero-card .circle-progress {
      width: 76px !important;
      height: 76px !important;
      --ring: 6px !important;
    }

    body.daily-learning-active .study-hero-card .circle-progress strong {
      font-size: 17px !important;
    }

    body.daily-learning-active .study-hero-card .circle-progress span {
      bottom: 13px !important;
      font-size: 10px !important;
    }

    body.daily-learning-active .quiz-shell {
      margin-top: 12px !important;
      padding-top: 12px !important;
      border-top: 1px solid rgba(226,232,240,.8) !important;
    }

    body.daily-learning-active .quiz-card,
    body.daily-learning-active .question-box {
      min-height: auto !important;
      border-radius: 18px !important;
    }

    body.daily-learning-active .question-box {
      padding: 16px !important;
    }

    body.daily-learning-active .question {
      font-size: clamp(18px, 3.8vw, 22px) !important;
      line-height: 1.52 !important;
    }

    body.exam-tab-active .exam-tab-card {
      width: min(920px, 100%) !important;
      margin: 0 auto 84px !important;
    }

    body.exam-tab-active .exam-tab-card .card-inner {
      min-height: auto !important;
      padding: 16px 18px 126px !important;
      border-radius: 24px !important;
    }

    body.exam-tab-active .exam-tab-card .exam-control-panel {
      display: block !important;
      width: min(760px, 100%) !important;
      margin: 0 auto 10px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-more-menu {
      display: none !important;
    }

    body.exam-tab-active .exam-filter-dock {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 0 !important;
    }

    body.exam-tab-active .exam-filter-dock label {
      min-width: 0 !important;
    }

    body.exam-tab-active #examPracticeBox {
      width: min(760px, 100%) !important;
      max-width: 760px !important;
      margin: 0 auto !important;
      gap: 10px !important;
      padding-bottom: 104px !important;
      min-height: 0 !important;
    }

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

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0, 1fr) 76px !important;
      gap: 10px !important;
      padding: 10px !important;
      margin: 0 0 10px !important;
      border-radius: 18px !important;
    }

    body.exam-tab-active .exam-status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }

    body.exam-tab-active .exam-status-item {
      padding: 9px 10px !important;
      border-radius: 13px !important;
    }

    body.exam-tab-active .exam-status-item span {
      font-size: 11px !important;
    }

    body.exam-tab-active .exam-status-item strong {
      font-size: 16px !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 76px !important;
      height: 76px !important;
      font-size: 17px !important;
      box-shadow: 0 10px 24px rgba(15,23,42,.14) !important;
    }

    body.exam-tab-active .exam-player-card {
      border-radius: 18px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-question-box {
      min-height: auto !important;
      padding: 16px 18px !important;
      border-radius: 18px !important;
    }

    body.exam-tab-active .exam-question {
      font-size: clamp(18px, 1.9vw, 23px) !important;
      line-height: 1.48 !important;
      letter-spacing: -0.035em !important;
    }

    body.exam-tab-active .inline-cycle-count {
      margin-top: 8px !important;
      font-size: 11px !important;
    }

    body.exam-tab-active .exam-choice-area {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(14px + env(safe-area-inset-bottom)) !important;
      width: min(600px, calc(100vw - 40px)) !important;
      transform: translateX(-50%) !important;
      z-index: 95 !important;
      padding: 8px !important;
      border-radius: 22px !important;
      background: rgba(255,255,255,.985) !important;
      box-shadow: 0 10px 26px rgba(15,23,42,.12) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body:not(.bottom-tabbar-hidden).exam-tab-active .exam-choice-area {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    body.answer-dock-hidden.exam-tab-active .exam-choice-area {
      transform: translateX(-50%) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    #examSourceFilterSelect,
    #examOrderModeSelect,
    #examRepeatSolvedToggle {
      accent-color: #0f172a;
    }

    #examSourceFilterSelect,
    #examOrderModeSelect {
      width: 100% !important;
      min-height: 36px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(203,213,225,.95) !important;
      background: #fff !important;
      color: #0f172a !important;
      font-weight: 900 !important;
    }

    #examStreakWrap .streak-smoke,
    .mini-visual-wrap .streak-smoke,
    body.exam-tab-active .exam-status-badge::before {
      display: block !important;
      opacity: .18 !important;
    }

    .settings-row:has(#settingSeparateShortcutsToggle) {
      display: none !important;
    }

    @media (min-width: 901px) {
      body.exam-tab-active .app {
        width: min(1040px, calc(100vw - 56px)) !important;
        max-width: 1040px !important;
      }
      body.feature-page-active .app {
        width: min(1040px, calc(100vw - 56px)) !important;
        max-width: 1040px !important;
      }
    }

    @media (max-width: 700px) {
      body.feature-page-active .study-feature-card {
        margin-bottom: 84px !important;
      }
      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 1fr !important;
      }
      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 72px !important;
      }
      body.exam-tab-active .exam-status-badge {
        width: 72px !important;
        height: 72px !important;
      }
      body.exam-tab-active .exam-choice-area {
        width: min(560px, calc(100vw - 24px)) !important;
      }
    }


    /* === Hyunwoo final correction pass: routing, layers, desktop ratio, compact players === */
    .settings-overlay {
      z-index: 10000 !important;
      align-items: center !important;
      background: #f6f8fb !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .settings-panel {
      position: relative !important;
      z-index: 10001 !important;
      width: min(520px, calc(100vw - 32px)) !important;
      height: auto !important;
      max-height: calc(100dvh - 36px) !important;
      border-radius: 28px !important;
      box-shadow: 0 28px 84px rgba(15, 23, 42, 0.22) !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    .settings-handle { display: none !important; }
    .settings-row {
      grid-template-columns: minmax(0, 1fr) auto !important;
      min-height: 54px !important;
      padding: 11px 13px !important;
    }
    .settings-row-icon { display: none !important; }

    body.feature-page-active .quick-launch-grid,
    body.feature-page-active .home-shortcut-label,
    body.feature-page-active .today-task-card,
    body.feature-page-active .study-storage-card,
    body.feature-page-active .home-storage-label,
    body.feature-page-active .footer {
      display: none !important;
    }
    body.feature-page-active .feature-switcher {
      display: none !important;
    }
    body.feature-page-active .study-feature-nav {
      width: min(980px, calc(100vw - 48px)) !important;
      min-height: 58px !important;
      padding: 12px 16px !important;
      margin: 0 auto 16px !important;
      grid-template-columns: auto 1fr !important;
      justify-items: start !important;
      box-shadow: none !important;
    }

    .quick-launch-icon {
      background: #eef3f9 !important;
      color: #334155 !important;
      border-color: #dbe3ee !important;
    }
    .quick-launch-btn:hover .quick-launch-icon {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }

    body.daily-learning-active .study-hero-card .card-inner {
      padding: 16px !important;
    }
    body.daily-learning-active .daily-hero {
      min-height: 0 !important;
      padding: 0 !important;
      margin-bottom: 12px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      display: block !important;
    }
    body.daily-learning-active .daily-hero > div:first-child {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
    }
    body.daily-learning-active .daily-title-row { margin: 0 !important; }
    body.daily-learning-active .daily-title { font-size: 20px !important; }
    body.daily-learning-active .daily-desc,
    body.daily-learning-active .daily-hero-meta,
    body.daily-learning-active .circle-progress,
    body.daily-learning-active #dailyStartBtn {
      display: none !important;
    }
    body.daily-learning-active .quiz-card {
      min-height: 0 !important;
      padding: 16px !important;
    }

    body.exam-tab-active .exam-tab-card {
      width: min(980px, calc(100vw - 56px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    body.exam-tab-active .exam-tab-card .card-inner {
      padding: 18px !important;
    }
    body.exam-tab-active .exam-player-status {
      grid-template-columns: repeat(4, minmax(0, 1fr)) 96px !important;
      gap: 10px !important;
      align-items: center !important;
      min-height: 92px !important;
    }
    body.exam-tab-active .exam-status-badge,
    body.exam-tab-active #examStreakWrap {
      width: 88px !important;
      height: 88px !important;
      background: radial-gradient(circle at 35% 28%, #ffffff 0 18%, #f8fafc 42%, #e2e8f0 100%) !important;
      color: #0f172a !important;
      border: 1px solid #dbe3ee !important;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12) !important;
    }
    body.exam-tab-active .exam-status-badge::before,
    body.exam-tab-active #examStreakWrap .streak-smoke {
      display: block !important;
      opacity: .26 !important;
    }
    body.exam-tab-active .exam-control-panel,
    body.exam-tab-active .exam-filter-dock {
      max-width: 820px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    body.exam-tab-active .exam-filter-dock {
      display: grid !important;
      grid-template-columns: 150px 170px 1fr !important;
      gap: 8px !important;
      padding: 8px !important;
      border-radius: 18px !important;
    }
    body.exam-tab-active .exam-filter-dock label {
      min-height: 42px !important;
      padding: 6px 9px !important;
    }
    body.exam-tab-active #examPracticeBox {
      min-height: 0 !important;
      padding-bottom: 104px !important;
    }
    body.exam-tab-active .exam-player-card,
    body.exam-tab-active .practice-panel {
      width: min(820px, calc(100vw - 72px)) !important;
      min-height: 270px !important;
      max-height: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 18px !important;
    }
    body.exam-tab-active .exam-question-box,
    body.exam-tab-active .question-box {
      min-height: 150px !important;
      max-height: 180px !important;
      overflow: auto !important;
      padding: 18px !important;
    }
    body.exam-tab-active .question-text {
      font-size: clamp(21px, 2vw, 28px) !important;
      line-height: 1.42 !important;
    }
    body.exam-tab-active .exam-choice-area {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(86px + env(safe-area-inset-bottom)) !important;
      transform: translateX(-50%) !important;
      width: min(560px, calc(100vw - 48px)) !important;
      z-index: 66 !important;
      padding: 8px !important;
      border-radius: 22px !important;
      background: rgba(255,255,255,.96) !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 20px 54px rgba(15, 23, 42, .16) !important;
    }
    body.bottom-tabbar-hidden.exam-tab-active .exam-choice-area {
      bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    body.feature-page-active .topic-panel,
    body.feature-page-active .review-panel {
      max-width: 820px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-bottom: 112px !important;
    }
    body.feature-page-active .topic-panel .question-box,
    body.feature-page-active .review-panel .question-box,
    body.feature-page-active .topic-panel .multi-target-box,
    body.feature-page-active .review-panel .multi-target-box {
      min-height: 120px !important;
      max-height: 180px !important;
      overflow: auto !important;
    }
    body.feature-page-active .topic-panel .learning-player-dock,
    body.feature-page-active .review-panel .learning-player-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(86px + env(safe-area-inset-bottom)) !important;
      transform: translateX(-50%) !important;
      width: min(560px, calc(100vw - 48px)) !important;
      z-index: 66 !important;
      padding: 8px !important;
      border-radius: 22px !important;
      background: rgba(255,255,255,.96) !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 20px 54px rgba(15, 23, 42, .16) !important;
    }
    body.bottom-tabbar-hidden.feature-page-active .topic-panel .learning-player-dock,
    body.bottom-tabbar-hidden.feature-page-active .review-panel .learning-player-dock {
      bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    @media (min-width: 901px) {
      .app {
        width: min(1120px, calc(100vw - 72px)) !important;
        max-width: 1120px !important;
      }
      body.feature-page-active .study-feature-card {
        width: min(980px, calc(100vw - 72px)) !important;
        max-width: 980px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      body.feature-page-active .topic-roadmap,
      body.feature-page-active .review-mode-grid,
      body.feature-page-active .passage-library-grid,
      body.feature-page-active .qna-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 900px) {
      body.exam-tab-active .exam-player-status {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 1fr !important;
      }
      body.exam-tab-active .exam-player-card,
      body.exam-tab-active .practice-panel {
        width: min(560px, calc(100vw - 28px)) !important;
      }
    }

    /* HYUNWOO RESPONSIVE FRAME LOCK: all tabs share stable mobile/tablet/desktop ratios */
    :root {
      --frame-mobile: 560px;
      --frame-tablet: 760px;
      --frame-desktop: 1080px;
      --content-desktop: 920px;
      --dock-desktop: 640px;
    }

    body {
      width: 100% !important;
      justify-content: center !important;
      overflow-x: hidden !important;
    }

    .app {
      width: min(var(--frame-mobile), calc(100vw - 24px)) !important;
      max-width: none !important;
      margin-inline: auto !important;
    }

    .dashboard-grid,
    .quick-launch-grid,
    .storage-hub-grid,
    .stats-grid,
    .leaderboard-podium,
    .topic-grid,
    .review-mode-grid,
    .passage-library-grid,
    .qna-list,
    .exam-player-status,
    .exam-status-grid {
      min-width: 0 !important;
    }

    .card,
    .card-inner,
    .mini-card,
    .study-feature-card,
    .profile-tab-card,
    .hall-tab-card,
    .exam-tab-card,
    .practice-panel,
    .exam-player-card,
    .question-box,
    .exam-question-box {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    .section-title,
    .exam-tab-title,
    .home-exam-title,
    .exam-question,
    .question,
    .question-text,
    .daily-title {
      letter-spacing: 0 !important;
    }

    .bottom-tabbar {
      width: min(var(--frame-mobile), calc(100vw - 24px)) !important;
      max-width: none !important;
    }

    .bottom-tab-btn {
      min-width: 0 !important;
      padding-inline: 6px !important;
      white-space: nowrap !important;
    }

    .bottom-tab-btn span {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.feature-page-active .study-feature-nav,
    body.feature-page-active .study-feature-card,
    body.profile-tab-active .profile-tab-card,
    body.hall-tab-active .hall-tab-card,
    body.exam-tab-active .exam-tab-card {
      width: 100% !important;
      max-width: 100% !important;
    }

    body.exam-tab-active .exam-filter-dock,
    body.exam-tab-active .exam-control-panel,
    body.exam-tab-active #examPracticeBox,
    body.exam-tab-active .exam-player-card,
    body.exam-tab-active .practice-panel,
    body.exam-tab-active .exam-player-stage {
      width: 100% !important;
      max-width: 100% !important;
    }

    body.exam-tab-active .exam-question-box,
    body.feature-page-active .question-box {
      max-height: none !important;
      overflow: visible !important;
    }

    body.exam-tab-active .exam-choice-area,
    body.feature-page-active .topic-panel .learning-player-dock,
    body.feature-page-active .review-panel .learning-player-dock,
    .learning-player-dock {
      width: min(var(--dock-desktop), calc(100vw - 24px)) !important;
      max-width: none !important;
    }

    @media (max-width: 700px) {
      body {
        padding: 14px 12px 96px !important;
      }

      .app {
        width: min(var(--frame-mobile), calc(100vw - 24px)) !important;
      }

      .topbar {
        margin-bottom: 12px !important;
      }

      .dashboard-grid,
      .storage-hub-grid,
      .topic-grid,
      body.feature-page-active .topic-grid,
      .review-mode-grid,
      body.feature-page-active .review-mode-grid,
      .passage-library-grid,
      body.feature-page-active .passage-library-grid,
      .qna-list,
      .leaderboard-podium {
        grid-template-columns: 1fr !important;
      }

      .quick-launch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

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

      body.feature-page-active .study-feature-nav {
        grid-template-columns: auto minmax(0, 1fr) !important;
        min-height: 52px !important;
        padding: 9px 10px !important;
      }

      body.feature-page-active .study-feature-title {
        font-size: 20px !important;
      }

      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 1fr !important;
      }

      body.exam-tab-active .exam-player-status,
      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 72px !important;
      }

      body.exam-tab-active .exam-status-badge,
      body.exam-tab-active #examStreakWrap {
        width: 72px !important;
        height: 72px !important;
      }

      .bottom-tabbar {
        width: min(var(--frame-mobile), calc(100vw - 20px)) !important;
        bottom: 10px !important;
      }

      .bottom-tab-btn {
        flex-direction: column !important;
        gap: 2px !important;
        min-height: 46px !important;
        font-size: 11px !important;
      }

      .bottom-tab-btn svg {
        width: 17px !important;
        height: 17px !important;
      }
    }

    @media (min-width: 701px) and (max-width: 900px) {
      body {
        padding: 22px 20px 104px !important;
      }

      .app {
        width: min(var(--frame-tablet), calc(100vw - 40px)) !important;
      }

      .dashboard-grid[data-study-home] {
        grid-template-columns: 1fr !important;
      }

      .quick-launch-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      .storage-hub-grid,
      .topic-grid,
      body.feature-page-active .topic-grid,
      .review-mode-grid,
      body.feature-page-active .review-mode-grid,
      .passage-library-grid,
      body.feature-page-active .passage-library-grid,
      .qna-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .stats-grid,
      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      .bottom-tabbar,
      body.exam-tab-active .exam-choice-area,
      body.feature-page-active .topic-panel .learning-player-dock,
      body.feature-page-active .review-panel .learning-player-dock,
      .learning-player-dock {
        width: min(680px, calc(100vw - 40px)) !important;
      }
    }

    @media (min-width: 901px) {
      body {
        padding: 30px 28px 110px !important;
      }

      .app {
        width: min(var(--frame-desktop), calc(100vw - 56px)) !important;
      }

      body.exam-tab-active .app,
      body.feature-page-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app {
        width: min(var(--frame-desktop), calc(100vw - 56px)) !important;
        max-width: var(--frame-desktop) !important;
      }

      .dashboard-grid[data-study-home] {
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr) !important;
      }

      body.feature-page-active .study-feature-nav,
      body.feature-page-active .study-feature-card,
      body.profile-tab-active .profile-tab-card,
      body.hall-tab-active .hall-tab-card,
      body.exam-tab-active .exam-tab-card {
        width: min(var(--content-desktop), 100%) !important;
        max-width: var(--content-desktop) !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      .topic-grid,
      body.feature-page-active .topic-grid,
      .review-mode-grid,
      body.feature-page-active .review-mode-grid,
      .passage-library-grid,
      body.feature-page-active .passage-library-grid,
      .qna-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .stats-grid,
      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 150px 170px minmax(0, 1fr) !important;
      }

      .bottom-tabbar {
        width: min(720px, calc(100vw - 56px)) !important;
      }
    }

    /* HYUNWOO HOTFIX: keep feature pages and exam player compact after legacy overrides */
    body.feature-page-active .study-feature-nav,
    body.feature-page-active .feature-switcher {
      display: none !important;
    }

    body.exam-tab-active #examPracticeBox {
      padding-bottom: 18px !important;
    }

    body.exam-tab-active .exam-control-panel {
      max-width: 680px !important;
      margin: 0 auto 8px !important;
      padding: 8px !important;
      border-radius: 16px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-filter-dock {
      max-width: 680px !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 6px !important;
      padding: 6px !important;
      margin-top: 0 !important;
      border-radius: 14px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-filter-dock label,
    body.exam-tab-active .exam-filter-dock .exam-repeat-control {
      min-height: 34px !important;
      padding: 6px 8px !important;
      border-radius: 12px !important;
      font-size: 10px !important;
    }

    body.exam-tab-active .exam-filter-dock select {
      min-height: 30px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
    }

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0, 1fr) 68px !important;
      align-items: center !important;
      padding: 9px !important;
      margin-bottom: 8px !important;
      border-radius: 16px !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-status-grid {
      gap: 6px !important;
    }

    body.exam-tab-active .exam-status-item {
      min-height: 42px !important;
      padding: 7px !important;
      border-radius: 12px !important;
    }

    body.exam-tab-active .exam-status-badge {
      position: relative !important;
      isolation: isolate !important;
      width: 62px !important;
      height: 62px !important;
      overflow: hidden !important;
      border-radius: 22px !important;
      background: #0f172a !important;
      color: #fff !important;
      border: 1px solid rgba(15, 23, 42, .1) !important;
      box-shadow: 0 10px 22px rgba(15, 23, 42, .12) !important;
      font-size: 13px !important;
    }

    body.exam-tab-active .exam-status-badge::before {
      display: none !important;
    }

    body.exam-tab-active .exam-status-badge-text {
      position: relative;
      z-index: 2;
    }

    body.exam-tab-active .exam-status-smoke {
      position: absolute;
      inset: 7px;
      z-index: 1;
      border-radius: 24px 18px 28px 20px;
      background:
        radial-gradient(circle at 28% 34%, rgba(255, 255, 255, .36), transparent 34%),
        radial-gradient(circle at 70% 64%, rgba(167, 139, 250, .38), transparent 38%),
        radial-gradient(circle at 46% 70%, rgba(125, 211, 252, .28), transparent 35%);
      filter: blur(4px);
      opacity: .55;
      animation: streakSmokeDrift 9s linear infinite;
      pointer-events: none;
    }

    body.exam-tab-active .exam-status-smoke.secondary {
      inset: 10px 5px 6px 9px;
      opacity: .38;
      animation-duration: 12s;
      animation-direction: reverse;
    }

    body.exam-tab-active .exam-player-card {
      max-width: 680px !important;
      margin-inline: auto !important;
      padding: 14px !important;
      border-radius: 18px !important;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
    }

    body.exam-tab-active .exam-question-box {
      height: clamp(190px, 34vh, 260px) !important;
      min-height: 190px !important;
      max-height: 260px !important;
      overflow-y: auto !important;
      padding: 16px !important;
      border-radius: 16px !important;
    }

    body.exam-tab-active .exam-choice-area {
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: none !important;
      z-index: auto !important;
      margin-top: 12px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-choice-area .answer-grid {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      position: static !important;
      transform: none !important;
    }

    body.exam-tab-active .exam-choice-area .answer-btn {
      min-height: 54px !important;
      height: 54px !important;
      border-radius: 16px !important;
      font-size: 26px !important;
      box-shadow: none !important;
    }

    @media (max-width: 560px) {
      body.exam-tab-active .exam-filter-dock {
        grid-template-columns: 1fr !important;
      }

      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 58px !important;
      }

      body.exam-tab-active .exam-status-badge {
        width: 56px !important;
        height: 56px !important;
        border-radius: 19px !important;
        font-size: 12px !important;
      }

      body.exam-tab-active .exam-question-box {
        height: clamp(180px, 32vh, 235px) !important;
        min-height: 180px !important;
        max-height: 235px !important;
      }
    }

    /* 현우 FIX: 평가원 OX는 문제 카드 내부 부품이 아니라 화면 하단 고정 답안바다. */
    body.exam-tab-active #examPracticeBox {
      padding-bottom: 118px !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(14px + env(safe-area-inset-bottom)) !important;
      width: min(620px, calc(100vw - 40px)) !important;
      max-width: 620px !important;
      transform: translateX(-50%) !important;
      z-index: 95 !important;
      padding: 8px !important;
      border: 1px solid rgba(226, 232, 240, 0.96) !important;
      border-radius: 24px !important;
      background: rgba(255, 255, 255, 0.985) !important;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

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

    body.answer-dock-hidden.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
      transform: translateX(-50%) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      position: static !important;
      width: 100% !important;
      transform: none !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn {
      height: 56px !important;
      min-height: 56px !important;
      border-radius: 16px !important;
      font-size: 27px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-player-card > .exam-choice-area {
      display: none !important;
    }

  

    /* 현우 최종 기준: 오늘의 OX는 초창기처럼 카드 안에서 단순하게, 평가원 OX는 채팅창+키보드 구조. */
    .daily-answer-area {
      margin-top: 14px !important;
      position: static !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .daily-answer-area .answer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      margin: 0 !important;
      padding: 0 !important;
      position: static !important;
      transform: none !important;
      width: 100% !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    .daily-answer-area .answer-btn {
      height: 58px !important;
      min-height: 58px !important;
      border-radius: 18px !important;
      font-size: 28px !important;
    }

    body.feature-page-active .study-feature-nav,
    body.feature-page-active .feature-switcher,
    .study-feature-nav .feature-switcher {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.exam-tab-active {
      overflow: hidden !important;
      padding-top: 16px !important;
      padding-bottom: 0 !important;
    }

    body.exam-tab-active .app {
      max-width: min(1040px, calc(100vw - 28px)) !important;
      height: calc(100dvh - 32px) !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .topbar,
    body.exam-tab-active .home-daily-label,
    body.exam-tab-active .study-hero-card,
    body.exam-tab-active .home-shortcut-label,
    body.exam-tab-active .quick-launch-grid,
    body.exam-tab-active .home-storage-label,
    body.exam-tab-active .dashboard-grid,
    body.exam-tab-active .study-storage-card,
    body.exam-tab-active .home-archive-card,
    body.exam-tab-active .footer {
      display: none !important;
    }

    body.exam-tab-active .exam-tab-card {
      display: block !important;
      height: calc(100dvh - 32px) !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-tab-card .card-inner {
      height: 100% !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      overflow: hidden !important;
    }

    body.exam-tab-active #examPracticeBox {
      width: 100% !important;
      max-width: 860px !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-player-stage {
      flex: 0 0 auto !important;
      position: relative !important;
      z-index: 20 !important;
    }

    body.exam-tab-active .exam-player-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 0 2px 8px !important;
    }

    body.exam-tab-active .exam-player-title {
      font-size: 18px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    body.exam-tab-active .exam-player-subtitle {
      margin: 3px 0 0 !important;
      font-size: 12px !important;
      color: var(--muted) !important;
    }

    body.exam-tab-active .exam-status-card {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 72px !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 10px !important;
      border-radius: 20px !important;
      border: 1px solid var(--line) !important;
      background: #ffffff !important;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .055) !important;
    }

    body.exam-tab-active .exam-status-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }

    body.exam-tab-active .exam-status-item {
      padding: 8px 7px !important;
      border-radius: 14px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.8) !important;
    }

    body.exam-tab-active .exam-status-item span {
      font-size: 10px !important;
    }

    body.exam-tab-active .exam-status-item strong {
      font-size: 15px !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 68px !important;
      height: 68px !important;
      border-radius: 22px !important;
      background: #ffffff !important;
      color: #334155 !important;
      border: 1px solid #dbe3ee !important;
      box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
      font-size: 12px !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-kebab-menu {
      position: relative !important;
      flex: 0 0 auto !important;
      z-index: 50 !important;
    }

    body.exam-tab-active .exam-kebab-menu > summary {
      list-style: none !important;
      display: grid !important;
      place-items: center !important;
      width: 38px !important;
      height: 34px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #ffffff !important;
      color: #475569 !important;
      font-size: 20px !important;
      font-weight: 1000 !important;
      cursor: pointer !important;
      line-height: 1 !important;
    }

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

    body.exam-tab-active .exam-kebab-panel {
      position: absolute !important;
      right: 0 !important;
      top: calc(100% + 8px) !important;
      width: min(310px, calc(100vw - 34px)) !important;
      padding: 12px !important;
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      background: #ffffff !important;
      box-shadow: 0 24px 64px rgba(15,23,42,.16) !important;
      display: grid !important;
      gap: 10px !important;
    }

    body.exam-tab-active .exam-kebab-title {
      font-size: 13px !important;
      font-weight: 950 !important;
      color: var(--text) !important;
    }

    body.exam-tab-active .exam-kebab-panel label {
      display: grid !important;
      gap: 5px !important;
      color: var(--muted) !important;
      font-size: 11px !important;
      font-weight: 900 !important;
    }

    body.exam-tab-active .exam-kebab-panel select {
      height: 38px !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      padding: 0 10px !important;
      background: #f8fafc !important;
      color: var(--text) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
    }

    body.exam-tab-active .exam-kebab-check {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    body.exam-tab-active .exam-kebab-actions {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }

    body.exam-tab-active .exam-kebab-actions .exam-control-btn:last-child {
      grid-column: 1 / -1 !important;
    }

    body.exam-tab-active .exam-player-card.exam-chat-card {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-width: none !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 12px !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 22px !important;
      border: 1px solid var(--line) !important;
      background: #ffffff !important;
      box-shadow: 0 10px 26px rgba(15,23,42,.065) !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-question-box.exam-chat-window {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      overflow-y: auto !important;
      border-radius: 18px !important;
      padding: clamp(16px, 2.6vw, 24px) !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.9) !important;
    }

    body.exam-tab-active .exam-question {
      margin: 8px 0 0 !important;
      font-size: clamp(18px, 2.1vw, 23px) !important;
      line-height: 1.62 !important;
      letter-spacing: -0.03em !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active .inline-cycle-count {
      margin-top: 12px !important;
      font-size: 12px !important;
      color: var(--muted) !important;
      position: static !important;
    }

    body.exam-tab-active .exam-result-area {
      flex: 0 0 auto !important;
      max-height: 32vh !important;
      overflow-y: auto !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(14px + env(safe-area-inset-bottom)) !important;
      width: min(860px, calc(100vw - 28px)) !important;
      max-width: 860px !important;
      transform: translateX(-50%) !important;
      z-index: 120 !important;
      padding: 8px !important;
      border: 1px solid rgba(226, 232, 240, 0.96) !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.985) !important;
      box-shadow: 0 16px 42px rgba(15,23,42,.14) !important;
      backdrop-filter: none !important;
    }

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

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      width: 100% !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn {
      height: 62px !important;
      min-height: 62px !important;
      border-radius: 18px !important;
      font-size: 30px !important;
      box-shadow: none !important;
    }

    @media (max-width: 700px) {
      body.exam-tab-active .app,
      body.exam-tab-active .exam-tab-card {
        height: calc(100dvh - 18px) !important;
      }
      body.exam-tab-active .exam-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 62px !important;
      }
      body.exam-tab-active .exam-status-badge {
        width: 60px !important;
        height: 60px !important;
        border-radius: 20px !important;
      }
      body.exam-tab-active .exam-question {
        font-size: 19px !important;
      }
      body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-btn {
        height: 58px !important;
        min-height: 58px !important;
      }
    }

  

    /* Dedicated OX player pages: topic.html/review.html?play=... */
    body.dedicated-ox-player {
      padding-bottom: 110px;
    }

    body.dedicated-ox-player .topbar,
    body.dedicated-ox-player .bottom-tabbar,
    body.dedicated-ox-player .study-feature-nav,
    body.dedicated-ox-player .feature-switcher,
    body.dedicated-ox-player .feature-command-strip,
    body.dedicated-ox-player .feature-toolbelt,
    body.dedicated-ox-player .topic-grid,
    body.dedicated-ox-player .review-mode-grid,
    body.dedicated-ox-player .review-mission-strip,
    body.dedicated-ox-player .review-mission-stats,
    body.dedicated-ox-player .review-preview-board,
    body.dedicated-ox-player [data-feature-panel="topic"] > .card-inner > .section-head,
    body.dedicated-ox-player [data-feature-panel="review"] > .card-inner > .section-head {
      display: none !important;
    }

    body.dedicated-ox-player.feature-page-active .app,
    body.dedicated-ox-player .app {
      width: min(100%, 860px);
      max-width: 860px;
    }

    body.dedicated-ox-player.feature-page-active .study-feature-card,
    body.dedicated-ox-player .study-feature-card {
      min-height: calc(100vh - 44px) !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      margin-bottom: 0 !important;
    }

    body.dedicated-ox-player .topic-panel,
    body.dedicated-ox-player .review-panel {
      display: block;
      width: min(100%, 760px);
      margin: 0 auto;
      padding-bottom: 96px;
    }

    body.dedicated-ox-player .topic-panel.hidden,
    body.dedicated-ox-player .review-panel.hidden {
      display: none !important;
    }

    body.dedicated-ox-player .topic-panel .question-box,
    body.dedicated-ox-player .review-panel .question-box,
    body.dedicated-ox-player .topic-panel .multi-target-box,
    body.dedicated-ox-player .review-panel .multi-target-box {
      border-radius: 22px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock,
    body.dedicated-ox-player .review-panel .learning-player-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(14px + env(safe-area-inset-bottom)) !important;
      width: min(620px, calc(100vw - 28px)) !important;
      transform: translateX(-50%) !important;
      z-index: 70 !important;
      margin: 0 !important;
      padding: 8px !important;
      border: 1px solid rgba(226, 232, 240, 0.95) !important;
      border-radius: 24px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14) !important;
      backdrop-filter: blur(16px) !important;
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock .answer-grid,
    body.dedicated-ox-player .review-panel .learning-player-dock .answer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      margin: 0 !important;
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock .answer-btn,
    body.dedicated-ox-player .review-panel .learning-player-dock .answer-btn {
      min-height: 58px !important;
      border-radius: 16px !important;
      font-size: 27px !important;
    }

    body.dedicated-ox-player .topic-panel .feedback,
    body.dedicated-ox-player .review-panel .feedback {
      margin-top: 12px;
    }

    /* DAILY OX RESTORE: pre-redesign card feel, ratio-adjusted only */
    .study-hero-card {
      max-width: 720px !important;
      margin-inline: auto !important;
    }

    .study-hero-card .card-inner {
      padding: 22px !important;
      background: #ffffff !important;
    }

    .daily-hero,
    body.daily-learning-active .daily-hero {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 118px !important;
      align-items: center !important;
      gap: 16px !important;
      min-height: 132px !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    .daily-hero::before {
      display: block !important;
      inset: -22px !important;
      background: #f8fafc !important;
      border-radius: 18px !important;
    }

    body.daily-learning-active .daily-hero > div:first-child {
      display: block !important;
    }

    .daily-title-row,
    body.daily-learning-active .daily-title-row {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      margin: 0 0 10px !important;
      flex-wrap: wrap !important;
    }

    .daily-title,
    body.daily-learning-active .daily-title {
      font-size: 23px !important;
      line-height: 1.2 !important;
      letter-spacing: -0.025em !important;
    }

    .daily-icon {
      width: 42px !important;
      height: 34px !important;
      border-radius: 12px !important;
      font-size: 12px !important;
    }

    .daily-desc,
    body.daily-learning-active .daily-desc {
      display: block !important;
      margin: 0 0 14px !important;
      font-size: 14px !important;
      line-height: 1.55 !important;
    }

    .daily-hero-meta,
    body.daily-learning-active .daily-hero-meta {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 7px !important;
      margin: 0 0 14px !important;
    }

    .daily-hero-chip {
      padding: 6px 9px !important;
      border-radius: 999px !important;
      font-size: 11px !important;
      box-shadow: none !important;
    }

    .study-hero-card .ox-action-btn,
    body.daily-learning-active #dailyStartBtn {
      display: inline-flex !important;
      width: auto !important;
      min-width: 132px !important;
      min-height: 42px !important;
      padding: 0 16px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      box-shadow: none !important;
    }

    .study-hero-card .circle-progress,
    body.daily-learning-active .circle-progress,
    body.daily-learning-active .study-hero-card .circle-progress {
      display: block !important;
      --ring: 7px !important;
      width: 112px !important;
      height: 112px !important;
      justify-self: end !important;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.075) !important;
    }

    .study-hero-card .circle-progress strong,
    body.daily-learning-active .study-hero-card .circle-progress strong {
      font-size: 24px !important;
      transform: translate(-50%, -60%) !important;
      -webkit-text-stroke: 0.2px currentColor !important;
    }

    .study-hero-card .circle-progress span,
    body.daily-learning-active .study-hero-card .circle-progress span {
      bottom: 22px !important;
      font-size: 12px !important;
    }

    body.daily-learning-active .quiz-shell,
    .quiz-shell {
      margin-top: 22px !important;
      padding-top: 22px !important;
      border-top: 1px solid var(--line) !important;
    }

    body.daily-learning-active .quiz-card {
      padding: 0 !important;
    }

    body.daily-learning-active .question-box {
      padding: 20px 18px !important;
      border-radius: var(--radius-md) !important;
      min-height: 0 !important;
    }

    body.daily-learning-active .question {
      font-size: 19px !important;
      line-height: 1.65 !important;
    }

    @media (max-width: 560px) {
      .study-hero-card .card-inner {
        padding: 18px !important;
      }

      .daily-hero,
      body.daily-learning-active .daily-hero {
        grid-template-columns: minmax(0, 1fr) 86px !important;
        gap: 12px !important;
        min-height: 116px !important;
      }

      .daily-title,
      body.daily-learning-active .daily-title {
        font-size: 20px !important;
      }

      .daily-icon {
        width: 34px !important;
        height: 30px !important;
        font-size: 11px !important;
      }

      .daily-desc,
      body.daily-learning-active .daily-desc {
        font-size: 13px !important;
        margin-bottom: 10px !important;
      }

      .daily-hero-meta,
      body.daily-learning-active .daily-hero-meta {
        margin-bottom: 10px !important;
      }

      .study-hero-card .circle-progress,
      body.daily-learning-active .circle-progress,
      body.daily-learning-active .study-hero-card .circle-progress {
        --ring: 6px !important;
        width: 82px !important;
        height: 82px !important;
      }

      .study-hero-card .circle-progress strong,
      body.daily-learning-active .study-hero-card .circle-progress strong {
        font-size: 18px !important;
      }

      .study-hero-card .circle-progress span,
      body.daily-learning-active .study-hero-card .circle-progress span {
        bottom: 16px !important;
        font-size: 10px !important;
      }

      body.daily-learning-active .question {
        font-size: 18px !important;
      }
    }

    @media (min-width: 561px) {
      .study-hero-card,
      body.daily-learning-active .study-hero-card {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    /* FEATURE WIDTH ALIGN: feature pages match the learning tab frame on tablet/desktop */
    @media (min-width: 561px) {
      body.feature-page-active .app {
        width: min(var(--frame-tablet), calc(100vw - 40px)) !important;
        max-width: var(--frame-tablet) !important;
      }

      body.feature-page-active .study-feature-card,
      body.feature-page-active .study-feature-card .card-inner,
      body.feature-page-active .topic-panel,
      body.feature-page-active .review-panel,
      body.feature-page-active .passage-panel,
      body.feature-page-active .qna-panel {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    @media (min-width: 901px) {
      body.feature-page-active .app {
        width: min(var(--frame-desktop), calc(100vw - 56px)) !important;
        max-width: var(--frame-desktop) !important;
      }
    }

    body.feature-page-active .qna-list {
      align-items: stretch !important;
    }

    body.feature-page-active .qna-list > .more-list-btn,
    .qna-list > .more-list-btn {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      justify-self: stretch !important;
    }

    /* FEATURE CARD NORMALIZE: inner cards use the same usable width as the tab */
    body.feature-page-active .study-feature-card > .card-inner,
    body.feature-page-active .section-head,
    body.feature-page-active .feature-toolbelt,
    body.feature-page-active .topic-roadmap,
    body.feature-page-active .review-mode-grid,
    body.feature-page-active .passage-library-grid,
    body.feature-page-active .qna-board-shell,
    body.feature-page-active .qna-list,
    body.feature-page-active .qna-form,
    body.feature-page-active .qna-detail {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.feature-page-active .topic-roadmap,
    body.feature-page-active .review-mode-grid,
    body.feature-page-active .passage-library-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    body.feature-page-active .qna-list {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }

    body.feature-page-active .topic-card,
    body.feature-page-active .topic-btn,
    body.feature-page-active .review-mode-card,
    body.feature-page-active .passage-library-card,
    body.feature-page-active .qna-item {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      justify-self: stretch !important;
    }

    @media (min-width: 701px) {
      body.feature-page-active .topic-roadmap,
      body.feature-page-active .review-mode-grid,
      body.feature-page-active .passage-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      body.feature-page-active .qna-list {
        grid-template-columns: 1fr !important;
      }
    }

    /* TABLET/DESKTOP RATIO FIX: feature/profile/hall inner content fills the frame */
    @media (min-width: 701px) {
      body.feature-page-active [data-feature-panel="topic"] .feature-toolbelt,
      body.feature-page-active [data-feature-panel="passage"] .feature-toolbelt,
      body.feature-page-active [data-feature-panel="qna"] .qna-board-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
      }

      body.feature-page-active [data-feature-panel="topic"] .feature-search,
      body.feature-page-active [data-feature-panel="passage"] .feature-search,
      body.feature-page-active [data-feature-panel="qna"] .feature-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      body.feature-page-active [data-feature-panel="topic"] .feature-filter-row,
      body.feature-page-active [data-feature-panel="passage"] .feature-filter-row,
      body.feature-page-active [data-feature-panel="qna"] .qna-filter-row {
        width: 100% !important;
        max-width: 100% !important;
      }

      body.feature-page-active .review-preview-board,
      body.feature-page-active .review-preview-list,
      body.feature-page-active .review-preview-item,
      body.feature-page-active .passage-panel,
      body.feature-page-active #passageThinkerList,
      body.feature-page-active .passage-chip-row,
      body.feature-page-active .qna-board,
      body.feature-page-active .qna-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      body.feature-page-active .review-preview-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      body.profile-tab-active .app,
      body.hall-tab-active .app {
        width: min(var(--frame-tablet), calc(100vw - 40px)) !important;
        max-width: var(--frame-tablet) !important;
      }

      body.profile-tab-active .profile-tab-card,
      body.hall-tab-active .hall-tab-card,
      body.profile-tab-active .profile-tab-card .card-inner,
      body.hall-tab-active .hall-tab-card .card-inner,
      body.profile-tab-active .stats-grid,
      body.profile-tab-active #myStatsGrid,
      body.hall-tab-active #leaderboardList,
      body.hall-tab-active .leaderboard-board {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }
    }

    @media (min-width: 901px) {
      body.profile-tab-active .app,
      body.hall-tab-active .app {
        width: min(var(--frame-desktop), calc(100vw - 56px)) !important;
        max-width: var(--frame-desktop) !important;
      }

      body.profile-tab-active .profile-summary,
      body.profile-tab-active .profile-mini-grid,
      body.hall-tab-active .leaderboard-podium,
      body.hall-tab-active .leaderboard-list {
        width: 100% !important;
        max-width: 100% !important;
      }

      body.hall-tab-active .leaderboard-podium {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    /* EXAM RATIO FIX: one centered player, no duplicate top filter, restored badge smoke */
    body.exam-tab-active {
      padding: 12px 12px 0 !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .app {
      width: min(760px, calc(100vw - 24px)) !important;
      max-width: 760px !important;
      height: calc(100dvh - 24px) !important;
      margin-inline: auto !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-tab-card,
    body.exam-tab-active .exam-tab-card .card-inner {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    body.exam-tab-active .exam-control-panel,
    body.exam-tab-active .exam-filter-dock {
      display: none !important;
    }

    body.exam-tab-active #examPracticeBox {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 auto !important;
      padding: 0 0 calc(88px + env(safe-area-inset-bottom)) !important;
      gap: 10px !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    body.exam-tab-active .exam-player-stage,
    body.exam-tab-active .exam-player-card.exam-chat-card {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: auto !important;
      box-sizing: border-box !important;
    }

    body.exam-tab-active .exam-player-head {
      padding: 0 2px 8px !important;
    }

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0, 1fr) 68px !important;
      gap: 10px !important;
      padding: 10px !important;
      border-radius: 18px !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
      min-width: 0 !important;
    }

    body.exam-tab-active .exam-status-badge {
      position: relative !important;
      isolation: isolate !important;
      width: 64px !important;
      height: 64px !important;
      border-radius: 22px !important;
      overflow: hidden !important;
      background: #0f172a !important;
      color: #ffffff !important;
      border: 1px solid rgba(15, 23, 42, .12) !important;
      box-shadow: 0 12px 24px rgba(15, 23, 42, .14) !important;
      font-size: 12px !important;
    }

    body.exam-tab-active .exam-status-badge::before,
    body.exam-tab-active .exam-status-badge::after {
      display: none !important;
    }

    body.exam-tab-active .exam-status-badge-text {
      position: relative !important;
      z-index: 3 !important;
      color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(15, 23, 42, .25) !important;
    }

    body.exam-tab-active .exam-status-smoke {
      display: block !important;
      position: absolute !important;
      inset: 4px !important;
      z-index: 1 !important;
      border-radius: 30px 20px 28px 22px !important;
      background:
        radial-gradient(circle at 22% 32%, rgba(255,255,255,.48), transparent 32%),
        radial-gradient(circle at 66% 28%, rgba(125,211,252,.42), transparent 36%),
        radial-gradient(circle at 62% 72%, rgba(167,139,250,.46), transparent 40%),
        radial-gradient(circle at 34% 76%, rgba(134,239,172,.26), transparent 34%) !important;
      filter: blur(4px) saturate(1.12) !important;
      opacity: .72 !important;
      transform-origin: 50% 50% !important;
      animation: streakSmokeDrift 10s linear infinite !important;
      pointer-events: none !important;
    }

    body.exam-tab-active .exam-status-smoke.secondary {
      inset: 9px 5px 5px 9px !important;
      opacity: .48 !important;
      filter: blur(5px) saturate(1.18) !important;
      animation-duration: 14s !important;
      animation-direction: reverse !important;
    }

    body.exam-tab-active .exam-player-card.exam-chat-card {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      padding: 12px !important;
      border-radius: 20px !important;
    }

    body.exam-tab-active .exam-question-box.exam-chat-window {
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      padding: clamp(16px, 2.4vw, 22px) !important;
      border-radius: 18px !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
      left: 50% !important;
      width: min(760px, calc(100vw - 24px)) !important;
      max-width: 760px !important;
      transform: translateX(-50%) !important;
      bottom: calc(12px + env(safe-area-inset-bottom)) !important;
      padding: 8px !important;
      box-sizing: border-box !important;
    }

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

    @media (max-width: 700px) {
      body.exam-tab-active {
        padding: 10px 10px 0 !important;
      }

      body.exam-tab-active .app {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100dvh - 20px) !important;
      }

      body.exam-tab-active .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 58px !important;
        gap: 8px !important;
        padding: 8px !important;
      }

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

      body.exam-tab-active .exam-status-badge {
        width: 56px !important;
        height: 56px !important;
        border-radius: 19px !important;
        font-size: 11px !important;
      }

      body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
      }
    }

    @media (min-width: 901px) {
      body.exam-tab-active .app,
      body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
        width: min(900px, calc(100vw - 56px)) !important;
        max-width: 900px !important;
      }
    }

    body:not(.study-home-active) .home-shortcut-label,
    body:not(.study-home-active) .quick-launch-grid[data-study-home],
    body:not(.study-home-active) [data-feature-target],
    body.feature-page-active .home-shortcut-label,
    body.feature-page-active .quick-launch-grid[data-study-home],
    body.feature-page-active [data-feature-target],
    body.exam-tab-active .home-shortcut-label,
    body.exam-tab-active .quick-launch-grid[data-study-home],
    body.profile-tab-active .home-shortcut-label,
    body.profile-tab-active .quick-launch-grid[data-study-home],
    body.hall-tab-active .home-shortcut-label,
    body.hall-tab-active .quick-launch-grid[data-study-home] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

  

    /* HYUNWOO EXAM CHAT EXPLANATION PASS: 평가원 = 채팅창 + 키보드 고정 구조 */
    body.exam-tab-active {
      overflow: hidden !important;
      padding: 10px 12px 0 !important;
    }

    body.exam-tab-active .app {
      width: min(920px, calc(100vw - 24px)) !important;
      max-width: min(920px, calc(100vw - 24px)) !important;
      height: calc(100dvh - 10px) !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-tab-card,
    body.exam-tab-active .exam-tab-card .card-inner {
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    body.exam-tab-active #examPracticeBox {
      width: 100% !important;
      max-width: 820px !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      padding: 0 0 calc(154px + env(safe-area-inset-bottom)) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-player-stage {
      flex: 0 0 auto !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 0 2px 4px !important;
      z-index: 90 !important;
    }

    body.exam-tab-active .exam-player-head {
      min-width: 0 !important;
      padding: 0 !important;
    }

    body.exam-tab-active .exam-player-title {
      font-size: 16px !important;
      line-height: 1.18 !important;
      letter-spacing: -0.03em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.exam-tab-active .exam-player-subtitle {
      margin-top: 2px !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
      color: var(--muted) !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.exam-tab-active .exam-status-card {
      width: min(420px, 46vw) !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 52px !important;
      gap: 6px !important;
      align-items: center !important;
      padding: 6px !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,.96) !important;
      border: 1px solid rgba(226,232,240,.92) !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-status-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 4px !important;
    }

    body.exam-tab-active .exam-status-item {
      padding: 5px 6px !important;
      border-radius: 11px !important;
      min-width: 0 !important;
    }

    body.exam-tab-active .exam-status-item span {
      font-size: 9px !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.exam-tab-active .exam-status-item strong {
      margin-top: 2px !important;
      font-size: 12px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
    }

    body.exam-tab-active .exam-status-badge {
      width: 52px !important;
      height: 52px !important;
      border-radius: 16px !important;
      font-size: 10px !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-player-card.exam-chat-card {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 10px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(226,232,240,.95) !important;
      background: #ffffff !important;
      box-shadow: 0 12px 30px rgba(15,23,42,.075) !important;
      overflow: hidden !important;
    }

    body.exam-tab-active .exam-question-box.exam-chat-window {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      border-radius: 19px !important;
      padding: clamp(17px, 2.6vw, 24px) !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.92) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important;
    }

    body.exam-tab-active .exam-question {
      margin: 8px 0 0 !important;
      font-size: clamp(18px, 2.15vw, 23px) !important;
      line-height: 1.62 !important;
      font-weight: 900 !important;
      letter-spacing: -0.03em !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active .inline-cycle-count {
      position: static !important;
      margin-top: 12px !important;
      font-size: 12px !important;
      color: var(--muted) !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-player-card.exam-chat-card,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered {
      gap: 8px !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-question-box.exam-chat-window,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-question-box.exam-chat-window {
      flex: 0 0 auto !important;
      height: auto !important;
      max-height: 92px !important;
      min-height: 0 !important;
      padding: 10px 12px !important;
      overflow: hidden !important;
      border-radius: 17px !important;
      background: #ffffff !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-question-box .question-label,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .question-label {
      font-size: 10px !important;
      line-height: 1.15 !important;
      margin: 0 0 4px !important;
      color: var(--muted) !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-question,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-question {
      margin: 0 !important;
      font-size: 12.5px !important;
      line-height: 1.42 !important;
      font-weight: 850 !important;
      letter-spacing: -0.02em !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .inline-cycle-count,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .inline-cycle-count {
      display: none !important;
    }

    body.exam-tab-active .exam-result-area {
      flex: 0 0 auto !important;
      min-height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-result-area,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-result-area {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      border-radius: 19px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226,232,240,.92) !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-feedback.show,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show {
      display: block !important;
      min-height: 100% !important;
      margin: 0 !important;
      padding: 16px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      animation: none !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-feedback-title,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-feedback-title {
      margin: 0 0 12px !important;
      font-size: 15px !important;
      line-height: 1.45 !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-explanation-title,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-explanation-title {
      margin: 0 0 8px !important;
      font-size: 12px !important;
      font-weight: 950 !important;
      color: var(--muted) !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-explanation,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-explanation {
      font-size: 14.5px !important;
      line-height: 1.72 !important;
      color: var(--text-soft) !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
    body.exam-tab-active #examPracticeBox > .learning-player-dock.floating-answer-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(82px + env(safe-area-inset-bottom)) !important;
      width: min(820px, calc(100vw - 24px)) !important;
      max-width: 820px !important;
      transform: translateX(-50%) !important;
      z-index: 130 !important;
      padding: 8px !important;
      border: 1px solid rgba(226,232,240,.96) !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.985) !important;
      box-shadow: 0 16px 42px rgba(15,23,42,.14) !important;
      backdrop-filter: none !important;
    }

    body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock .answer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      margin: 0 !important;
    }

    body.exam-tab-active #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;
      box-shadow: none !important;
    }

    body.exam-tab-active #examPracticeBox > .learning-player-dock.floating-answer-dock {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      min-height: 64px !important;
    }

    body.exam-tab-active #examPracticeBox > .learning-player-dock.floating-answer-dock .exam-next-btn.show {
      min-height: 46px !important;
      border-radius: 15px !important;
      padding: 0 18px !important;
      white-space: nowrap !important;
    }

    body.exam-tab-active .bottom-tabbar {
      display: grid !important;
      z-index: 100 !important;
    }

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

    @media (max-width: 760px) {
      body.exam-tab-active {
        padding: 8px 10px 0 !important;
      }

      body.exam-tab-active .app {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100dvh - 8px) !important;
      }

      body.exam-tab-active #examPracticeBox {
        padding-bottom: calc(146px + env(safe-area-inset-bottom)) !important;
        gap: 7px !important;
      }

      body.exam-tab-active .exam-player-stage {
        grid-template-columns: minmax(0, 1fr) auto !important;
      }

      body.exam-tab-active .exam-status-card {
        width: auto !important;
        grid-template-columns: 48px !important;
        padding: 4px !important;
      }

      body.exam-tab-active .exam-status-grid {
        display: none !important;
      }

      body.exam-tab-active .exam-status-badge {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
      }

      body.exam-tab-active .exam-question {
        font-size: clamp(18px, 5.2vw, 22px) !important;
        line-height: 1.58 !important;
      }

      body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-question,
      body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-question {
        font-size: 12px !important;
        line-height: 1.38 !important;
      }

      body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock,
      body.exam-tab-active #examPracticeBox > .learning-player-dock.floating-answer-dock {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 20px) !important;
      }
    }

  

    /* 현우 FINAL FIX: 평가원/별도 OX 플레이어 구조, 버튼 정렬, 기록/바로가기 밀도 정리 */
    button,
    .soft-btn,
    .primary-btn,
    .tiny-btn,
    .exam-control-btn,
    .exam-next-btn,
    .multi-back-btn,
    .action-btn,
    .back-btn,
    .bookmark-btn,
    .logout-btn,
    .study-home-btn,
    .answer-btn {
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1.15 !important;
      vertical-align: middle !important;
    }

    .answer-btn,
    .exam-next-btn,
    .soft-btn,
    .primary-btn,
    .tiny-btn,
    .exam-control-btn,
    .multi-back-btn {
      display: inline-flex !important;
      gap: 6px !important;
    }

    .answer-btn {
      line-height: 1 !important;
      padding-top: 0 !important;
      padding-bottom: 2px !important;
      font-variant-numeric: tabular-nums !important;
    }

    .quick-launch-grid {
      align-items: stretch !important;
    }

    .quick-launch-btn {
      display: grid !important;
      grid-template-rows: 42px 22px 34px !important;
      align-content: start !important;
      justify-items: center !important;
      min-height: 116px !important;
      gap: 7px !important;
      padding-top: 15px !important;
    }

    .quick-launch-icon {
      width: 38px !important;
      height: 38px !important;
      display: grid !important;
      place-items: center !important;
      align-self: center !important;
      line-height: 1 !important;
      transform: none !important;
    }

    .quick-launch-title,
    .quick-launch-sub {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      line-height: 1.25 !important;
      text-align: center !important;
    }

    .quick-launch-sub {
      align-items: flex-start !important;
    }

    .profile-hero {
      display: grid !important;
      gap: 10px !important;
      padding: 20px !important;
      min-height: 0 !important;
    }

    .profile-main-number {
      margin-top: 4px !important;
    }

    .profile-main-caption {
      margin-top: 2px !important;
    }

    .profile-hero-metrics {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin-top: 4px !important;
    }

    .profile-hero-metric {
      border: 1px solid rgba(226, 232, 240, .9) !important;
      border-radius: 14px !important;
      background: rgba(248, 250, 252, .92) !important;
      padding: 9px 10px !important;
      min-width: 0 !important;
    }

    .profile-hero-metric span {
      display: block !important;
      color: var(--muted) !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .profile-hero-metric strong {
      display: block !important;
      margin-top: 4px !important;
      color: var(--text) !important;
      font-size: 16px !important;
      font-weight: 950 !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header {
      flex: 0 0 auto !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(430px, .95fr) !important;
      align-items: center !important;
      gap: 14px !important;
      width: 100% !important;
      min-height: 76px !important;
      padding: 12px 14px !important;
      border: 1px solid rgba(226, 232, 240, .96) !important;
      border-radius: 24px !important;
      background: rgba(255, 255, 255, .98) !important;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
      z-index: 96 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-player-head {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 0 !important;
      min-width: 0 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-player-title {
      margin: 0 !important;
      font-size: 20px !important;
      line-height: 1.18 !important;
      letter-spacing: -0.035em !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-player-subtitle {
      margin: 5px 0 0 !important;
      font-size: 12px !important;
      line-height: 1.25 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-card {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 58px 40px !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
      min-width: 0 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-item {
      min-width: 0 !important;
      padding: 8px 8px !important;
      border-radius: 14px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226, 232, 240, .86) !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-item span {
      font-size: 10px !important;
      line-height: 1.1 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-item strong {
      margin-top: 3px !important;
      font-size: 14px !important;
      line-height: 1.05 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-badge {
      width: 58px !important;
      height: 52px !important;
      border-radius: 16px !important;
      font-size: 11px !important;
      box-shadow: none !important;
      background: #ffffff !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-kebab-menu {
      position: relative !important;
      justify-self: end !important;
      z-index: 120 !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-kebab-menu > summary {
      width: 40px !important;
      height: 40px !important;
      border-radius: 15px !important;
      background: #ffffff !important;
      border: 1px solid rgba(203, 213, 225, .92) !important;
    }

    body.exam-tab-active #examPracticeBox {
      gap: 10px !important;
    }

    body.exam-tab-active .exam-player-card.exam-chat-card.correct-pop,
    body.exam-tab-active #examPracticeBox.correct-pop .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .topic-panel.correct-pop .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .review-panel.correct-pop .exam-player-card.exam-chat-card {
      animation: correctPop 0.3s cubic-bezier(.2, .9, .2, 1) both !important;
    }

    body.exam-tab-active .exam-player-card.exam-chat-card.wrong-pop,
    body.exam-tab-active #examPracticeBox.wrong-pop .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .topic-panel.wrong-pop .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .review-panel.wrong-pop .exam-player-card.exam-chat-card {
      animation: wrongPop 0.36s ease both !important;
    }

    @keyframes correctPop {
      0% { transform: scale(1); box-shadow: 0 12px 30px rgba(15,23,42,.075); }
      45% { transform: scale(1.012); box-shadow: 0 0 0 5px rgba(34,197,94,.10), 0 18px 44px rgba(22,163,74,.12); }
      100% { transform: scale(1); box-shadow: 0 12px 30px rgba(15,23,42,.075); }
    }

    @keyframes wrongPop {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-3px); }
      100% { transform: translateX(0); }
    }

    body.dedicated-ox-player {
      padding: 8px 10px 0 !important;
      overflow: hidden !important;
    }

    body.dedicated-ox-player.feature-page-active .app,
    body.dedicated-ox-player .app {
      width: min(100%, 860px) !important;
      max-width: 860px !important;
      height: calc(100dvh - 8px) !important;
      min-height: 0 !important;
    }

    body.dedicated-ox-player .topic-panel,
    body.dedicated-ox-player .review-panel {
      width: min(100%, 820px) !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      overflow: hidden !important;
    }

    body.dedicated-ox-player .learning-stage {
      flex: 0 0 auto !important;
      min-height: 66px !important;
      border-radius: 22px !important;
    }

    body.dedicated-ox-player .topic-panel .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-chat-card {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 10px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      background: #ffffff !important;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .075) !important;
      overflow: hidden !important;
    }

    body.dedicated-ox-player .topic-panel .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .review-panel .exam-question-box.exam-chat-window {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      border-radius: 19px !important;
      padding: clamp(17px, 2.6vw, 24px) !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226, 232, 240, .92) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55) !important;
    }

    body.dedicated-ox-player .topic-panel .exam-question,
    body.dedicated-ox-player .review-panel .exam-question {
      margin: 8px 0 0 !important;
      font-size: clamp(18px, 2.15vw, 23px) !important;
      line-height: 1.62 !important;
      font-weight: 900 !important;
      letter-spacing: -0.03em !important;
      word-break: keep-all !important;
    }

    body.dedicated-ox-player .multi-parent-summary {
      margin-top: 14px !important;
      padding: 12px 13px !important;
      border-radius: 16px !important;
      background: #ffffff !important;
      border: 1px solid rgba(226, 232, 240, .9) !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.55 !important;
      max-height: 98px !important;
      overflow: auto !important;
      word-break: keep-all !important;
    }

    body.dedicated-ox-player .learning-multi-control-area {
      flex: 0 0 auto !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .review-panel.learning-has-feedback .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .topic-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-answered .exam-question-box.exam-chat-window {
      flex: 0 0 auto !important;
      max-height: none !important;
      padding: 10px 12px !important;
      overflow: visible !important;
      border-radius: 17px !important;
      background: #ffffff !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback .exam-question,
    body.dedicated-ox-player .review-panel.learning-has-feedback .exam-question,
    body.dedicated-ox-player .topic-panel .exam-player-card.exam-answered .exam-question,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-answered .exam-question {
      margin: 0 !important;
      font-size: 12.5px !important;
      line-height: 1.42 !important;
      font-weight: 850 !important;
      display: block !important;
      -webkit-box-orient: initial !important;
      -webkit-line-clamp: none !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback .inline-cycle-count,
    body.dedicated-ox-player .review-panel.learning-has-feedback .inline-cycle-count {
      display: none !important;
    }

    body.dedicated-ox-player .topic-panel .exam-result-area,
    body.dedicated-ox-player .review-panel .exam-result-area {
      flex: 0 0 auto !important;
      max-height: 0 !important;
      overflow: hidden !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback .exam-result-area,
    body.dedicated-ox-player .review-panel.learning-has-feedback .exam-result-area,
    body.dedicated-ox-player .topic-panel .exam-player-card.exam-answered .exam-result-area,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-answered .exam-result-area {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      border-radius: 19px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(226, 232, 240, .92) !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback .feedback.show,
    body.dedicated-ox-player .review-panel.learning-has-feedback .feedback.show,
    body.dedicated-ox-player .topic-panel .exam-player-card.exam-answered .feedback.show,
    body.dedicated-ox-player .review-panel .exam-player-card.exam-answered .feedback.show {
      display: block !important;
      min-height: 100% !important;
      margin: 0 !important;
      padding: 16px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      animation: none !important;
    }

    body.dedicated-ox-player .topic-panel.learning-has-feedback > .learning-player-dock:not(.feedback-correct):not(.feedback-wrong),
    body.dedicated-ox-player .review-panel.learning-has-feedback > .learning-player-dock:not(.feedback-correct):not(.feedback-wrong) {
      display: none !important;
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock,
    body.dedicated-ox-player .review-panel .learning-player-dock {
      bottom: calc(14px + env(safe-area-inset-bottom)) !important;
      width: min(820px, calc(100vw - 24px)) !important;
      z-index: 130 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock.feedback-correct,
    body.dedicated-ox-player .topic-panel .learning-player-dock.feedback-wrong,
    body.dedicated-ox-player .review-panel .learning-player-dock.feedback-correct,
    body.dedicated-ox-player .review-panel .learning-player-dock.feedback-wrong {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      min-height: 64px !important;
    }

    body.dedicated-ox-player .topic-panel .learning-player-dock .answer-btn,
    body.dedicated-ox-player .review-panel .learning-player-dock .answer-btn {
      height: 60px !important;
      min-height: 60px !important;
      border-radius: 18px !important;
      font-size: 30px !important;
    }

    @media (max-width: 760px) {
      body.exam-tab-active .exam-player-stage.exam-status-header {
        grid-template-columns: 1fr !important;
        min-height: 96px !important;
        gap: 8px !important;
        padding: 12px !important;
      }

      body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-card {
        grid-template-columns: minmax(0, 1fr) 40px !important;
      }

      body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-item:nth-child(4),
      body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-badge {
        display: none !important;
      }

      body.exam-tab-active .exam-player-stage.exam-status-header .exam-player-title {
        font-size: 18px !important;
      }

      body.exam-tab-active #examPracticeBox {
        padding-bottom: calc(146px + env(safe-area-inset-bottom)) !important;
      }

      body.dedicated-ox-player .learning-stage {
        min-height: 62px !important;
      }

      body.dedicated-ox-player .topic-panel,
      body.dedicated-ox-player .review-panel {
        padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
      }

      body.dedicated-ox-player .topic-panel .learning-player-dock .answer-btn,
      body.dedicated-ox-player .review-panel .learning-player-dock .answer-btn {
        height: 56px !important;
        min-height: 56px !important;
        font-size: 28px !important;
      }
    }

  

    /* 현우 FINAL FIX: 평가원 복합선지 부모 문항은 요약 박스로만 유지 */
    body.exam-tab-active .multi-parent-summary {
      margin-top: 14px !important;
      padding: 12px 13px !important;
      border-radius: 16px !important;
      background: #ffffff !important;
      border: 1px solid rgba(226, 232, 240, .9) !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.55 !important;
      max-height: 98px !important;
      overflow: auto !important;
      word-break: keep-all !important;
    }

    body.exam-tab-active .exam-question-box.exam-chat-window .multi-progress {
      margin-top: 12px !important;
    }

    /* 현우 회귀 정리: 피드백, 메뉴, 스크롤, 텍스트 깨짐 보정 */
    .toast {
      z-index: 10050 !important;
      bottom: calc(102px + env(safe-area-inset-bottom)) !important;
      pointer-events: auto !important;
    }

    .answer-btn.correct-choice {
      animation: answerCorrectBounce .28s cubic-bezier(.2, .9, .25, 1.15) both !important;
      border-color: rgba(34, 197, 94, .8) !important;
      background: #ecfdf5 !important;
      color: #166534 !important;
    }

    .answer-btn.wrong-choice {
      animation: answerWrongShake .34s ease both !important;
      border-color: rgba(239, 68, 68, .75) !important;
      background: #fef2f2 !important;
      color: #991b1b !important;
    }

    .answer-btn.choice-tap {
      animation: answerChoiceTap .14s ease both !important;
    }

    .quiz-card.correct-pop,
    .exam-player-card.exam-chat-card.correct-pop,
    #examPracticeBox.correct-pop .exam-player-card.exam-chat-card,
    .topic-panel.correct-pop .exam-player-card.exam-chat-card,
    .review-panel.correct-pop .exam-player-card.exam-chat-card {
      animation: correctPop .32s cubic-bezier(.2, .9, .2, 1) both !important;
    }

    .quiz-card.wrong-pop,
    .exam-player-card.exam-chat-card.wrong-pop,
    #examPracticeBox.wrong-pop .exam-player-card.exam-chat-card,
    .topic-panel.wrong-pop .exam-player-card.exam-chat-card,
    .review-panel.wrong-pop .exam-player-card.exam-chat-card {
      animation: wrongPop .34s ease both !important;
    }

    @keyframes answerCorrectBounce {
      0% { transform: scale(1); box-shadow: none; }
      45% { transform: scale(1.045); box-shadow: 0 0 0 5px rgba(34, 197, 94, .12); }
      100% { transform: scale(1); box-shadow: none; }
    }

    @keyframes answerWrongShake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      50% { transform: translateX(4px); }
      75% { transform: translateX(-2px); }
    }

    @keyframes answerChoiceTap {
      0% { transform: scale(1); }
      50% { transform: scale(.965); }
      100% { transform: scale(1); }
    }

    body.exam-tab-active .exam-kebab-menu,
    body.exam-tab-active .exam-player-stage.exam-status-header .exam-kebab-menu {
      z-index: 5000 !important;
      pointer-events: auto !important;
    }

    body.exam-tab-active .exam-kebab-menu > summary,
    body.exam-tab-active .exam-kebab-panel {
      pointer-events: auto !important;
    }

    body.exam-tab-active .exam-kebab-panel {
      z-index: 5001 !important;
    }

    .exam-save-settings-btn {
      width: 100% !important;
      height: 40px !important;
      margin-top: 2px !important;
    }

    body.exam-tab-active .exam-streak-status {
      position: relative !important;
      overflow: hidden !important;
      isolation: isolate !important;
      display: grid !important;
    }

    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-item.exam-streak-status,
    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-badge {
      display: grid !important;
    }

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

    body.exam-tab-active .exam-streak-status .exam-status-smoke {
      position: absolute !important;
      inset: -9px !important;
      z-index: 1 !important;
      opacity: .24 !important;
      pointer-events: none !important;
      border-radius: inherit !important;
      filter: blur(9px) saturate(1.05) !important;
      background:
        radial-gradient(circle at 24% 35%, rgba(129, 140, 248, .28), transparent 34%),
        radial-gradient(circle at 72% 60%, rgba(56, 189, 248, .20), transparent 36%),
        radial-gradient(circle at 52% 40%, rgba(236, 72, 153, .13), transparent 38%) !important;
      animation: subtleSmokeDrift 7s linear infinite !important;
    }

    body.exam-tab-active .exam-streak-status .exam-status-smoke.secondary {
      opacity: .18 !important;
      animation-duration: 9s !important;
      animation-direction: reverse !important;
    }

    @keyframes subtleSmokeDrift {
      from { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(calc(1.02 + var(--streak-wobble, 0))); }
      to { transform: rotate(360deg) scale(1); }
    }

    .exam-result-area,
    .learning-result-area {
      min-height: 0 !important;
    }

    .exam-feedback.show,
    .feedback.show {
      min-height: 0 !important;
      max-height: min(46vh, 420px) !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .exam-explanation,
    .explanation {
      min-height: 72px !important;
      max-height: min(34vh, 300px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      min-width: 0 !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-feedback.show,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-feedback.show,
    body.dedicated-ox-player .topic-panel.learning-has-feedback .feedback.show,
    body.dedicated-ox-player .review-panel.learning-has-feedback .feedback.show {
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      max-height: 100% !important;
      overflow: hidden !important;
    }

    body.exam-tab-active #examPracticeBox.exam-has-feedback .exam-explanation,
    body.exam-tab-active .exam-player-card.exam-chat-card.exam-answered .exam-explanation,
    body.dedicated-ox-player .topic-panel.learning-has-feedback .explanation,
    body.dedicated-ox-player .review-panel.learning-has-feedback .explanation {
      flex: 1 1 auto !important;
      min-height: 88px !important;
      max-height: none !important;
      overflow-y: auto !important;
    }

    .quick-launch-title,
    .quick-launch-sub,
    .qna-status,
    .qna-item-arrow,
    .qna-time,
    .more-list-btn,
    .review-preview-meta span {
      writing-mode: horizontal-tb !important;
      word-break: keep-all !important;
      white-space: nowrap !important;
    }

    .quick-launch-title,
    .quick-launch-sub {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: center !important;
    }

    .storage-hub-title span:last-child,
    .passage-keyword,
    .passage-read-btn {
      display: none !important;
    }

    .passage-card-head {
      justify-content: flex-start !important;
    }

    .qna-item {
      text-align: left !important;
      min-width: 0 !important;
    }

    .qna-item-top,
    .qna-item-foot {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
    }

    .qna-item-foot {
      justify-content: space-between !important;
    }

    .qna-item .qna-question {
      text-align: left !important;
      word-break: keep-all !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
      grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
      align-items: stretch !important;
    }

    body.feature-page-active [data-feature-panel="review"] .review-mission-stats {
      grid-column: 1 / -1 !important;
    }

    .review-preview-item {
      grid-template-columns: 1fr !important;
    }

    .review-preview-meta {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
    }

    .profile-hero-metrics {
      display: none !important;
    }

    button,
    .soft-btn,
    .primary-btn,
    .tiny-btn,
    .exam-control-btn,
    .exam-next-btn,
    .multi-back-btn,
    .action-btn,
    .back-btn,
    .bookmark-btn,
    .logout-btn,
    .study-home-btn,
    .answer-btn,
    .more-list-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    body.dedicated-ox-player .home-shortcut-label,
    body.dedicated-ox-player .quick-launch-grid[data-study-home],
    body.dedicated-ox-player [data-feature-target],
    body.dedicated-ox-player .study-storage-card,
    body.dedicated-ox-player .feature-toolbelt,
    body.dedicated-ox-player .feature-command-strip,
    body.dedicated-ox-player .study-feature-nav,
    body.feature-page-active:not(.study-home-active) .quick-launch-grid[data-study-home],
    body.feature-page-active:not(.study-home-active) [data-feature-target],
    body.feature-page-active:not(.study-home-active) .study-feature-nav,
    body.feature-page-active:not(.study-home-active) .feature-switcher {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* 현우 최종 폭/바로가기/평가원 연속 박스 보정 */
    .app,
    body.feature-page-active .app,
    body.profile-tab-active .app,
    body.hall-tab-active .app {
      width: min(100%, 960px) !important;
      max-width: min(960px, calc(100vw - 24px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    @media (min-width: 901px) {
      .app,
      body.feature-page-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app {
        width: min(100%, 1120px) !important;
        max-width: min(1120px, calc(100vw - 56px)) !important;
      }
    }

    .quick-launch-btn {
      grid-template-rows: 38px auto auto !important;
      min-width: 0 !important;
      overflow: visible !important;
    }

    .quick-launch-title {
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
      max-width: none !important;
      width: auto !important;
      line-height: 1.2 !important;
      letter-spacing: -0.02em !important;
    }

    .quick-launch-sub {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      line-height: 1.25 !important;
      min-height: 30px !important;
    }

    body.exam-tab-active .exam-status-card {
      grid-template-columns: minmax(0, 1fr) 40px !important;
    }

    body.exam-tab-active .exam-status-grid,
    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.exam-tab-active .exam-status-badge,
    body.exam-tab-active .exam-player-stage.exam-status-header .exam-status-badge {
      display: none !important;
    }

    body.exam-tab-active .exam-streak-status {
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
      border-color: rgba(199, 210, 254, .75) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 10px 24px rgba(99, 102, 241, .08) !important;
    }

    body.exam-tab-active .exam-streak-status .exam-status-smoke {
      inset: -18px !important;
      opacity: .38 !important;
      filter: blur(13px) saturate(1.25) !important;
      background:
        radial-gradient(ellipse at 18% 38%, rgba(99, 102, 241, .34), transparent 35%),
        radial-gradient(ellipse at 76% 62%, rgba(14, 165, 233, .26), transparent 36%),
        radial-gradient(ellipse at 48% 30%, rgba(168, 85, 247, .25), transparent 34%),
        radial-gradient(ellipse at 42% 78%, rgba(236, 72, 153, .18), transparent 34%) !important;
      animation: subtleSmokeDrift 8s linear infinite !important;
    }

    body.exam-tab-active .exam-streak-status .exam-status-smoke.secondary {
      opacity: .26 !important;
      animation-duration: 11s !important;
    }

    @media (max-width: 720px) {
      body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
        grid-template-columns: 1fr !important;
      }
    }

  

    /* HYUNWOO RESCUE PASS 2026-06-30
       목적: 누적 패치로 무너진 비율/라우팅/OX 플레이어/피드백/스크롤을 재정렬 */
    :root {
      --hy-readable-max: 880px;
      --hy-feature-max: 1120px;
      --hy-button-min: 80px;
    }

    button,
    .soft-btn,
    .primary-btn,
    .tiny-btn,
    .exam-control-btn,
    .exam-next-btn,
    .multi-back-btn,
    .answer-btn,
    .review-mode-card,
    .review-mode-action,
    .topic-start-chip,
    .more-list-btn,
    .qna-item,
    .storage-hub-item {
      word-break: keep-all !important;
      overflow-wrap: normal !important;
    }

    .soft-btn,
    .primary-btn,
    .tiny-btn,
    .exam-control-btn,
    .exam-next-btn,
    .multi-back-btn,
    .more-list-btn,
    .review-mode-action,
    .action-btn,
    .back-btn,
    .bookmark-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      line-height: 1.1 !important;
      min-width: var(--hy-button-min) !important;
      flex: 0 0 auto !important;
    }

    .app { max-width: 1080px !important; }
    body.feature-page-active .app { max-width: var(--hy-feature-max) !important; }
    body.dedicated-ox-player .app,
    body.exam-tab-active .app { max-width: var(--hy-readable-max) !important; }

    /* 홈 바로가기: 아이콘/제목/설명 row 고정, 세로 찢김 방지 */
    .quick-launch-grid {
      grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
      gap: 12px !important;
    }
    .quick-launch-btn {
      min-width: 0 !important;
      min-height: 104px !important;
      grid-template-rows: 38px 20px minmax(18px, auto) !important;
      align-content: start !important;
      justify-items: center !important;
      padding: 14px 16px !important;
      gap: 7px !important;
    }
    .quick-launch-icon {
      width: 38px !important;
      height: 38px !important;
      line-height: 1 !important;
    }
    .quick-launch-title {
      width: 100% !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      text-align: center !important;
      line-height: 1.15 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .quick-launch-sub {
      width: 100% !important;
      max-width: 150px !important;
      min-width: 0 !important;
      line-height: 1.35 !important;
      text-align: center !important;
      word-break: keep-all !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    /* 학습 보관함: 아이콘 제거, 문구 중심 */
    .storage-hub-title span:last-child { display: none !important; }
    .storage-hub-item {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 14px !important;
      min-height: 72px !important;
    }
    .storage-hub-title,
    .storage-hub-stat { text-align: left !important; }
    .storage-hub-item .soft-btn { min-width: 72px !important; }

    /* feature 페이지 빈 hero 잔재 제거 */
    body.feature-page-active .study-feature-card {
      min-height: auto !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
    }
    body.feature-page-active .study-feature-card > .card-inner {
      padding: 0 !important;
      display: grid !important;
      gap: 16px !important;
    }
    body.dedicated-ox-player .study-feature-card > .card-inner { gap: 10px !important; }
    body.dedicated-ox-player [data-feature-panel="topic"] > .card-inner > .section-head,
    body.dedicated-ox-player [data-feature-panel="review"] > .card-inner > .section-head,
    body.dedicated-ox-player [data-feature-panel="topic"] .feature-toolbelt,
    body.dedicated-ox-player [data-feature-panel="topic"] #topicList,
    body.dedicated-ox-player [data-feature-panel="review"] .review-mode-grid,
    body.dedicated-ox-player [data-feature-panel="review"] .review-preview-board,
    body.dedicated-ox-player .study-feature-nav,
    body.dedicated-ox-player .feature-switcher,
    body.dedicated-ox-player .feature-command-strip {
      display: none !important;
    }
    body.dedicated-ox-player #topicPanel,
    body.dedicated-ox-player #reviewPanel {
      display: grid !important;
      gap: 10px !important;
      width: 100% !important;
      min-height: 0 !important;
    }

    /* 주제별 카드: 큰 빈 여백/이중박스 줄이기 */
    body.feature-page-active [data-feature-panel="topic"] .topic-roadmap {
      grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
      gap: 10px !important;
    }
    body.feature-page-active [data-feature-panel="topic"] .topic-btn {
      min-height: 80px !important;
      padding: 10px 12px !important;
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="topic"] .topic-name,
    body.feature-page-active [data-feature-panel="topic"] .topic-meta {
      text-align: left !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.feature-page-active [data-feature-panel="topic"] .topic-course-footer { justify-content: end !important; }
    body.feature-page-active [data-feature-panel="topic"] .topic-start-chip {
      min-width: 66px !important;
      height: 32px !important;
      padding: 0 10px !important;
      white-space: nowrap !important;
    }
    body.feature-page-active [data-feature-panel="topic"] .topic-favorite-btn { justify-self: end !important; }

    /* 복습 카드: 텍스트가 세로로 찢어지지 않게 재배치 */
    body.feature-page-active [data-feature-panel="review"] .review-mode-grid {
      grid-template-columns: repeat(2, minmax(340px, 1fr)) !important;
      gap: 14px !important;
      align-items: stretch !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-mission-stats {
      grid-column: 1 / -1 !important;
      grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-mode-card {
      display: grid !important;
      grid-template-columns: minmax(132px, auto) auto minmax(0,1fr) auto !important;
      align-items: center !important;
      column-gap: 14px !important;
      min-height: 78px !important;
      padding: 16px 18px !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-mode-title {
      white-space: nowrap !important;
      min-width: 0 !important;
      line-height: 1.15 !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-count-pill {
      margin: 0 !important;
      justify-self: start !important;
      flex: 0 0 auto !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-mode-copy {
      min-width: 0 !important;
      text-align: left !important;
      line-height: 1.35 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    body.feature-page-active [data-feature-panel="review"] .review-mode-action {
      min-width: 86px !important;
      min-height: 42px !important;
      padding: 0 12px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #f8fafc !important;
      color: var(--text) !important;
    }
    .review-preview-head span { font-size: 0 !important; }
    .review-preview-head span::after { content: "문항 · 출처"; font-size: 12px; }
    .review-preview-item { padding: 11px 13px !important; }
    .review-preview-meta span:not(:first-child):not(:last-child) { display: none !important; }
    .review-preview-question {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
    }

    /* 제시문/Q&A 목록 단순화 */
    body.feature-page-active [data-feature-panel="passage"] .passage-chip-row { display: none !important; }
    body.feature-page-active [data-feature-panel="passage"] .passage-library-grid {
      grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
      gap: 10px !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-library-card {
      display: grid !important;
      grid-template-columns: 92px minmax(0,1fr) !important;
      align-items: center !important;
      gap: 12px !important;
      min-height: 66px !important;
      padding: 12px 14px !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-card-head { min-width: 0 !important; }
    body.feature-page-active [data-feature-panel="passage"] .passage-thinker {
      display: block !important;
      width: 100% !important;
      white-space: normal !important;
      line-height: 1.25 !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-excerpt {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      line-height: 1.35 !important;
      text-align: left !important;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-board-shell { gap: 10px !important; }
    body.feature-page-active [data-feature-panel="qna"] .qna-item {
      display: grid !important;
      grid-template-columns: auto minmax(0,1fr) auto !important;
      grid-template-areas: "meta question foot" !important;
      align-items: center !important;
      gap: 12px !important;
      min-height: 62px !important;
      padding: 12px 14px !important;
      text-align: left !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-item-top {
      grid-area: meta !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      min-width: 0 !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-question {
      grid-area: question !important;
      text-align: left !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-item-foot {
      grid-area: foot !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      justify-content: flex-end !important;
      white-space: nowrap !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-item-arrow {
      font-size: 12px !important;
      color: var(--muted) !important;
      font-weight: 850 !important;
    }

    /* 평가원/공통 OX 플레이어: 가로로 늘린 카드가 아니라 읽기 화면으로 재정렬 */
    body.exam-tab-active #examPracticeBox,
    body.dedicated-ox-player #topicPanel,
    body.dedicated-ox-player #reviewPanel {
      width: 100% !important;
      max-width: var(--hy-readable-max) !important;
      margin: 0 auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      padding-bottom: calc(138px + env(safe-area-inset-bottom)) !important;
    }
    body.exam-tab-active .exam-player-stage.exam-status-header,
    body.exam-tab-active .exam-status-header {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      gap: 14px !important;
      align-items: center !important;
      border: 1px solid var(--line) !important;
      border-radius: 22px !important;
      background: #ffffff !important;
      padding: 14px 16px !important;
      box-shadow: 0 12px 26px rgba(15,23,42,.055) !important;
      margin-bottom: 10px !important;
      overflow: visible !important;
      position: relative !important;
      z-index: 20 !important;
    }
    body.exam-tab-active .exam-player-head { min-width: 0 !important; }
    body.exam-tab-active .exam-player-title {
      font-size: 18px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      letter-spacing: -0.025em !important;
    }
    body.exam-tab-active .exam-player-subtitle {
      font-size: 12px !important;
      line-height: 1.35 !important;
      margin: 4px 0 0 !important;
      color: var(--muted) !important;
    }
    body.exam-tab-active .exam-status-card {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    body.exam-tab-active .exam-status-grid {
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
    }
    body.exam-tab-active .exam-status-item {
      min-width: 64px !important;
      height: 42px !important;
      padding: 6px 9px !important;
      border-radius: 14px !important;
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      text-align: left !important;
      position: relative !important;
      overflow: hidden !important;
    }
    body.exam-tab-active .exam-status-item span {
      display: block !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      color: var(--muted) !important;
      margin: 0 0 3px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }
    body.exam-tab-active .exam-status-item strong {
      display: block !important;
      font-size: 13px !important;
      line-height: 1 !important;
      font-weight: 1000 !important;
      white-space: nowrap !important;
    }
    body.exam-tab-active .exam-kebab-menu {
      position: relative !important;
      z-index: 10000 !important;
      overflow: visible !important;
    }
    body.exam-tab-active .exam-kebab-menu > summary {
      width: 42px !important;
      height: 42px !important;
      border-radius: 14px !important;
      display: grid !important;
      place-items: center !important;
      pointer-events: auto !important;
      user-select: none !important;
    }
    body.exam-tab-active .exam-kebab-panel {
      position: absolute !important;
      right: 0 !important;
      top: calc(100% + 10px) !important;
      width: min(320px, calc(100vw - 28px)) !important;
      z-index: 10001 !important;
      pointer-events: auto !important;
    }

    body.exam-tab-active .exam-streak-status[class*="streak-"]::before,
    .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke,
    .exam-streak-status .exam-status-smoke {
      background: rgba(148,163,184,.30) !important;
      filter: blur(6px) !important;
    }
    body.exam-tab-active .exam-streak-status .exam-status-smoke {
      display: block !important;
      position: absolute !important;
      width: 20px !important;
      height: 20px !important;
      left: 38% !important;
      bottom: -8px !important;
      border-radius: 999px !important;
      opacity: .55 !important;
      animation: hySmokeRise 2.5s ease-in-out infinite !important;
      pointer-events: none !important;
    }
    body.exam-tab-active .exam-streak-status .exam-status-smoke.secondary {
      left: 58% !important;
      width: 16px !important;
      height: 16px !important;
      animation-delay: .8s !important;
    }
    @keyframes hySmokeRise {
      0% { transform: translateY(6px) scale(.65); opacity: 0; }
      30% { opacity: .45; }
      100% { transform: translateY(-24px) scale(1.25); opacity: 0; }
    }

    .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .learning-chat-card {
      display: flex !important;
      flex-direction: column !important;
      min-height: clamp(360px, 56vh, 560px) !important;
      max-height: calc(100dvh - 238px) !important;
      overflow: hidden !important;
      border: 1px solid var(--line) !important;
      border-radius: 24px !important;
      background: #ffffff !important;
      padding: 14px !important;
      box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
      transform: none !important;
    }
    .exam-question-box.exam-chat-window,
    .learning-chat-window {
      flex: 0 0 auto !important;
      min-height: 0 !important;
      padding: 18px 20px !important;
      border-radius: 20px !important;
      border: 1px solid #e5eaf2 !important;
      background: #f8fafc !important;
      overflow: visible !important;
    }
    .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
    .learning-has-feedback .exam-question-box.exam-chat-window,
    .learning-has-feedback .learning-chat-window {
      flex: 0 0 auto !important;
      padding: 12px 14px !important;
      background: #fbfcfe !important;
    }
    .question-label,
    .exam-question-box .question-label {
      display: block !important;
      margin-bottom: 9px !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 950 !important;
      letter-spacing: .01em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
    }
    .exam-question,
    .exam-question.question {
      margin: 0 !important;
      color: var(--text) !important;
      font-size: clamp(19px, 2.1vw, 23px) !important;
      font-weight: 950 !important;
      line-height: 1.55 !important;
      letter-spacing: -0.025em !important;
      text-align: left !important;
      word-break: keep-all !important;
    }
    .exam-player-card.exam-answered .exam-question,
    .learning-has-feedback .exam-question {
      font-size: 14px !important;
      line-height: 1.45 !important;
      font-weight: 900 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      color: var(--text-soft) !important;
    }
    .inline-cycle-count,
    .multi-parent-summary {
      margin-top: 10px !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 850 !important;
      line-height: 1.45 !important;
      text-align: left !important;
      word-break: keep-all !important;
    }
    .multi-parent-summary {
      padding: 10px 12px !important;
      border: 1px solid #e5eaf2 !important;
      border-radius: 14px !important;
      background: #ffffff !important;
    }
    .multi-progress {
      margin-top: 10px !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
    }
    .multi-chip {
      min-width: 42px !important;
      white-space: nowrap !important;
    }

    .exam-result-area,
    .learning-result-area {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      margin-top: 10px !important;
    }
    .exam-feedback,
    .feedback {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      display: none !important;
      width: 100% !important;
      padding: 16px 18px !important;
      border-radius: 20px !important;
      border: 1px solid #e5eaf2 !important;
      background: #ffffff !important;
      text-align: left !important;
    }
    .exam-feedback.show,
    .feedback.show {
      display: block !important;
      animation: hyFeedbackIn .18s ease both !important;
    }
    @keyframes hyFeedbackIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .exam-feedback-title,
    .feedback-title {
      display: inline-flex !important;
      align-items: center !important;
      margin-bottom: 10px !important;
      padding: 7px 10px !important;
      border-radius: 999px !important;
      font-size: 13px !important;
      font-weight: 1000 !important;
      line-height: 1.2 !important;
    }
    .exam-feedback.correct .exam-feedback-title,
    .feedback.correct .feedback-title { background: var(--correct-bg) !important; color: var(--correct) !important; }
    .exam-feedback.wrong .exam-feedback-title,
    .feedback.wrong .feedback-title { background: var(--wrong-bg) !important; color: var(--wrong) !important; }
    .exam-explanation-title,
    .explanation-title {
      margin: 8px 0 8px !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 950 !important;
      text-align: left !important;
    }
    .exam-explanation,
    .explanation {
      font-size: 15px !important;
      line-height: 1.75 !important;
      color: var(--text) !important;
      text-align: left !important;
      word-break: keep-all !important;
    }

    .correct-pop,
    .wrong-pop,
    .exam-player-card.correct-pop,
    .exam-player-card.wrong-pop,
    #examPracticeBox.correct-pop .exam-player-card,
    #examPracticeBox.wrong-pop .exam-player-card,
    .topic-panel.correct-pop .exam-player-card,
    .topic-panel.wrong-pop .exam-player-card,
    .review-panel.correct-pop .exam-player-card,
    .review-panel.wrong-pop .exam-player-card {
      animation: none !important;
      transform: none !important;
    }
    .answer-btn.correct-choice {
      animation: hyAnswerCorrect .28s cubic-bezier(.2,.9,.2,1) both !important;
      box-shadow: 0 0 0 4px rgba(34,197,94,.13), 0 14px 28px rgba(21,128,61,.16) !important;
    }
    .answer-btn.wrong-choice {
      animation: hyAnswerWrong .30s ease both !important;
      box-shadow: 0 0 0 4px rgba(239,68,68,.13), 0 14px 28px rgba(185,28,28,.15) !important;
    }
    .answer-grid.shake { animation: hyGridShake .26s ease both !important; }
    @keyframes hyAnswerCorrect {
      0% { transform: scale(1); }
      45% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    @keyframes hyAnswerWrong {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-6px); }
      55% { transform: translateX(5px); }
      80% { transform: translateX(-2px); }
    }
    @keyframes hyGridShake {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-2px); }
    }

    .learning-player-dock.floating-answer-dock,
    .exam-choice-area.exam-fixed-answer-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(84px + env(safe-area-inset-bottom)) !important;
      transform: translateX(-50%) !important;
      width: min(620px, calc(100vw - 32px)) !important;
      z-index: 9000 !important;
      border: 1px solid rgba(226,232,240,.98) !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.98) !important;
      box-shadow: 0 16px 42px rgba(15,23,42,.14) !important;
      padding: 8px !important;
      display: block !important;
    }
    .learning-player-dock .answer-grid,
    .exam-choice-area .answer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }
    .learning-player-dock .answer-btn,
    .exam-choice-area .answer-btn {
      height: 58px !important;
      min-width: 0 !important;
      border-radius: 18px !important;
      font-size: 22px !important;
      font-weight: 1000 !important;
      line-height: 1 !important;
    }
    .learning-player-dock.feedback-correct,
    .learning-player-dock.feedback-wrong {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 10px !important;
    }
    .exam-dock-message {
      font-size: 14px !important;
      font-weight: 1000 !important;
      text-align: left !important;
    }
    .learning-player-dock.feedback-correct .exam-dock-message { color: var(--correct) !important; }
    .learning-player-dock.feedback-wrong .exam-dock-message { color: var(--wrong) !important; }
    .learning-player-dock.feedback-correct .exam-next-btn,
    .learning-player-dock.feedback-wrong .exam-next-btn { min-width: 118px !important; }

    /* 기록 탭: 로그/카드는 좌측 정렬 유지 */
    .profile-section-card,
    .profile-section-card *,
    .archive-list,
    .archive-list * { text-align: left !important; }
    .profile-mini-value,
    .profile-main-number { text-align: left !important; }
    .year-heatmap { text-align: initial !important; }
    .year-cell { text-align: center !important; }

    .toast {
      z-index: 30000 !important;
      bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    }

    @media (max-width: 760px) {
      .app,
      body.feature-page-active .app,
      body.exam-tab-active .app,
      body.dedicated-ox-player .app { max-width: 100% !important; }
      .quick-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      body.feature-page-active [data-feature-panel="topic"] .topic-roadmap,
      body.feature-page-active [data-feature-panel="passage"] .passage-library-grid,
      body.feature-page-active [data-feature-panel="review"] .review-mode-grid { grid-template-columns: 1fr !important; }
      body.feature-page-active [data-feature-panel="review"] .review-mode-card {
        grid-template-columns: minmax(96px, auto) auto !important;
        grid-template-areas: "title count" "copy copy" "action action" !important;
      }
      body.feature-page-active [data-feature-panel="review"] .review-mode-title { grid-area: title !important; }
      body.feature-page-active [data-feature-panel="review"] .review-count-pill { grid-area: count !important; }
      body.feature-page-active [data-feature-panel="review"] .review-mode-copy { grid-area: copy !important; }
      body.feature-page-active [data-feature-panel="review"] .review-mode-action { grid-area: action !important; justify-self: start !important; }
      body.feature-page-active [data-feature-panel="qna"] .qna-item {
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "meta foot" "question question" !important;
      }
      body.exam-tab-active .exam-player-stage.exam-status-header { grid-template-columns: 1fr !important; }
      body.exam-tab-active .exam-status-card { justify-content: space-between !important; }
      body.exam-tab-active .exam-status-grid { flex-wrap: wrap !important; }
      .exam-player-card.exam-chat-card,
      body.dedicated-ox-player .learning-chat-card { min-height: 440px !important; max-height: calc(100dvh - 220px) !important; }
    }

  

    /* HYUNWOO RESCUE ADDENDUM: dedicated OX stage is a compact header, not hero banner */
    body.dedicated-ox-player .learning-stage {
      display: grid !important;
      grid-template-columns: 40px minmax(0, 1fr) 42px !important;
      align-items: center !important;
      gap: 9px !important;
      min-height: 62px !important;
      padding: 9px 10px !important;
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      background: #ffffff !important;
      box-shadow: 0 10px 22px rgba(15,23,42,.045) !important;
      margin: 0 0 8px !important;
      overflow: visible !important;
    }
    body.dedicated-ox-player .learning-stage-copy {
      min-width: 0 !important;
      display: grid !important;
      gap: 4px !important;
    }
    body.dedicated-ox-player .learning-stage .player-back-btn,
    body.dedicated-ox-player .learning-stage .player-more-btn {
      display: inline-grid !important;
      place-items: center !important;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 13px !important;
      background: transparent !important;
      color: #0f172a !important;
      box-shadow: none !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
    }
    body.dedicated-ox-player .learning-stage .player-back-btn {
      border: 0 !important;
    }
    body.dedicated-ox-player .learning-stage .player-more-btn {
      border: 1px solid var(--line) !important;
      background: #f8fafc !important;
    }
    body.dedicated-ox-player .learning-stage .player-back-svg {
      display: block !important;
      width: 24px !important;
      height: 24px !important;
      transform: translateX(.5px) !important;
    }
    body.dedicated-ox-player .learning-stage .settings-gear-svg {
      display: block !important;
      width: 18px !important;
      height: 18px !important;
      overflow: visible !important;
    }
    body.dedicated-ox-player .learning-stage-kicker {
      display: none !important;
    }
    body.dedicated-ox-player .learning-stage-title {
      font-size: 16px !important;
      font-weight: 1000 !important;
      line-height: 1.2 !important;
      letter-spacing: -0.025em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
    }
    body.dedicated-ox-player .learning-stage-meta {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 6px !important;
      overflow: hidden !important;
    }
    body.dedicated-ox-player .learning-stage-chip {
      height: 24px !important;
      padding: 0 8px !important;
      border-radius: 999px !important;
      font-size: 11px !important;
      white-space: nowrap !important;
      flex: 0 1 auto !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.dedicated-ox-player .learning-stage-count {
      width: auto !important;
      min-width: 0 !important;
      height: 24px !important;
      min-height: 24px !important;
      border-radius: 999px !important;
      padding: 0 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #0f172a !important;
      color: #ffffff !important;
      font-size: 11px !important;
      font-weight: 1000 !important;
      box-shadow: none !important;
      white-space: nowrap !important;
      flex: 0 0 auto !important;
    }
    body.dedicated-ox-player .learning-stage .player-back-btn:focus-visible,
    body.dedicated-ox-player .learning-stage .player-more-btn:focus-visible {
      outline: 2px solid #0f172a !important;
      outline-offset: 2px !important;
    }
    @media (max-width: 360px) {
      body.dedicated-ox-player .learning-stage {
        grid-template-columns: 36px minmax(0, 1fr) 38px !important;
        gap: 6px !important;
        padding-inline: 8px !important;
      }
      body.dedicated-ox-player .learning-stage .player-back-btn,
      body.dedicated-ox-player .learning-stage .player-more-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
      }
    }

  

    /* HYUNWOO FINAL FEEDBACK PATCH 2026-06-30 */
    :root {
      --hy-readable-max: 1040px;
      --hy-feature-max: 1120px;
      --hy-ox-dock-height: 86px;
    }

    /* 1. 바로가기 텍스트: 흰 레이어/클램프에 가려지지 않게 전부 가로 노출 */
    .quick-launch-grid,
    body.feature-page-active .quick-launch-grid,
    .quick-launch-grid[data-study-home] {
      grid-template-columns: repeat(4, minmax(172px, 1fr)) !important;
      overflow: visible !important;
      align-items: stretch !important;
    }
    .quick-launch-btn {
      position: relative !important;
      overflow: visible !important;
      min-height: 116px !important;
      padding: 15px 14px 14px !important;
      grid-template-rows: 38px auto auto !important;
      align-content: start !important;
    }
    .quick-launch-btn::before,
    .quick-launch-btn::after { pointer-events: none !important; }
    .quick-launch-title,
    .quick-launch-sub {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      white-space: normal !important;
      word-break: keep-all !important;
      overflow-wrap: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: initial !important;
      line-height: 1.28 !important;
      text-align: center !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .quick-launch-title { font-size: 14px !important; }
    .quick-launch-sub { font-size: 12px !important; }

    /* 2. 검색창 상단 간격 */
    .feature-toolbelt,
    .qna-board-toolbar {
      margin-top: 10px !important;
    }
    body.feature-page-active .feature-toolbelt,
    body.feature-page-active .qna-board-toolbar {
      margin-top: 14px !important;
    }

    /* 3. 평가원 상단바: 폭 확장, 연속/더보기 가림 해소 */
    body.exam-tab-active .app,
    body.dedicated-ox-player .app { max-width: var(--hy-readable-max) !important; }
    body.exam-tab-active #examPracticeBox,
    body.dedicated-ox-player #topicPanel,
    body.dedicated-ox-player #reviewPanel {
      max-width: var(--hy-readable-max) !important;
      padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
      overflow: visible !important;
    }
    body.exam-tab-active .exam-player-stage.exam-status-header,
    body.exam-tab-active .exam-status-header {
      width: 100% !important;
      min-height: 78px !important;
      grid-template-columns: minmax(260px,1fr) auto !important;
      padding: 15px 18px !important;
      overflow: visible !important;
      z-index: 45000 !important;
    }
    body.exam-tab-active .exam-status-card,
    body.exam-tab-active .exam-status-grid {
      overflow: visible !important;
      min-width: 0 !important;
    }
    body.exam-tab-active .exam-status-grid {
      display: flex !important;
      align-items: stretch !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
    }
    body.exam-tab-active .exam-status-item {
      min-width: 74px !important;
      height: 46px !important;
      padding: 7px 10px !important;
      overflow: visible !important;
      flex: 0 0 auto !important;
    }
    body.exam-tab-active .exam-streak-status {
      min-width: 86px !important;
      position: relative !important;
      isolation: isolate !important;
    }
    body.exam-tab-active .exam-status-item span,
    body.exam-tab-active .exam-status-item strong {
      overflow: visible !important;
      text-overflow: clip !important;
    }
    body.exam-tab-active .exam-kebab-menu {
      position: relative !important;
      z-index: 80000 !important;
      overflow: visible !important;
    }
    body.exam-tab-active .exam-kebab-menu[open] { z-index: 90000 !important; }
    body.exam-tab-active .exam-kebab-panel {
      position: absolute !important;
      right: 0 !important;
      top: calc(100% + 10px) !important;
      z-index: 90001 !important;
      width: min(360px, calc(100vw - 28px)) !important;
      max-height: min(560px, calc(100dvh - 130px)) !important;
      overflow-y: auto !important;
      background: #ffffff !important;
      border: 1px solid var(--line-strong) !important;
      box-shadow: 0 22px 60px rgba(15,23,42,.22) !important;
      pointer-events: auto !important;
    }
    body.exam-tab-active .exam-kebab-actions {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }
    body.exam-tab-active .exam-save-settings-btn,
    body.exam-tab-active .exam-new-set-btn {
      width: 100% !important;
      min-width: 0 !important;
    }

    /* 연기 효과: 그라데이션 덩어리 말고 작은 입자 */
    body.exam-tab-active .exam-streak-status .exam-status-smoke {
      display: block !important;
      position: absolute !important;
      width: 12px !important;
      height: 12px !important;
      left: 35% !important;
      bottom: 2px !important;
      border-radius: 999px !important;
      background: rgba(100,116,139,.34) !important;
      filter: blur(5px) !important;
      opacity: 0 !important;
      animation: hyOldSmokeRise 2.8s ease-in-out infinite !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    body.exam-tab-active .exam-streak-status .exam-status-smoke.secondary {
      left: 60% !important;
      width: 10px !important;
      height: 10px !important;
      animation-delay: .95s !important;
    }
    @keyframes hyOldSmokeRise {
      0% { transform: translateY(10px) translateX(0) scale(.55); opacity: 0; }
      30% { opacity: .42; }
      70% { opacity: .22; }
      100% { transform: translateY(-28px) translateX(7px) scale(1.35); opacity: 0; }
    }

    /* 4. OX 플레이어: 전체 박스 고정 + 내부 스크롤 복구 */
    .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .learning-chat-card {
      height: clamp(440px, calc(100dvh - 245px), 620px) !important;
      min-height: 440px !important;
      max-height: calc(100dvh - 220px) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      padding: 14px !important;
      transform: none !important;
    }
    .exam-question-box.exam-chat-window,
    .learning-chat-window {
      flex: 0 0 auto !important;
      min-height: 118px !important;
      max-height: 42% !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 16px 18px !important;
      scroll-behavior: auto !important;
    }
    .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
    .learning-has-feedback .learning-chat-window,
    .learning-has-feedback .exam-question-box.exam-chat-window {
      min-height: 96px !important;
      max-height: 34% !important;
      padding: 13px 15px !important;
    }
    .question-label,
    .exam-question-box .question-label {
      font-size: 13px !important;
      line-height: 1.35 !important;
      margin-bottom: 8px !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      color: var(--muted) !important;
    }
    .exam-question,
    .exam-question.question {
      font-size: clamp(17px, 1.8vw, 21px) !important;
      line-height: 1.58 !important;
      font-weight: 900 !important;
      letter-spacing: -0.02em !important;
      word-break: keep-all !important;
    }
    .exam-player-card.exam-answered .exam-question,
    .learning-has-feedback .exam-question {
      font-size: clamp(14px, 1.35vw, 17px) !important;
      line-height: 1.5 !important;
      -webkit-line-clamp: 3 !important;
    }
    .multi-parent-summary {
      font-size: 13px !important;
      line-height: 1.45 !important;
      padding: 9px 11px !important;
      margin-top: 9px !important;
      max-height: 78px !important;
      overflow-y: auto !important;
    }
    .exam-result-area,
    .learning-result-area {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .exam-feedback,
    .feedback {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: none !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    .exam-feedback.show,
    .feedback.show {
      display: flex !important;
    }
    .multi-result-list {
      flex: 0 0 auto !important;
      max-height: 116px !important;
      overflow-y: auto !important;
      padding-right: 2px !important;
    }
    .exam-explanation,
    .explanation {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding-right: 4px !important;
      max-height: none !important;
    }
    .exam-explanation.explanation-hidden,
    .explanation.explanation-hidden {
      display: none !important;
    }
    .exam-choice-area.hidden,
    .learning-player-dock.hidden {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .learning-player-dock.floating-answer-dock,
    .exam-choice-area.exam-fixed-answer-dock {
      z-index: 36000 !important;
      bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }
    .learning-player-dock.feedback-correct,
    .learning-player-dock.feedback-wrong {
      z-index: 37000 !important;
      min-height: 76px !important;
      grid-template-columns: minmax(0,1fr) minmax(118px, auto) !important;
    }
    .exam-dock-message {
      min-width: 0 !important;
      font-size: 15px !important;
      line-height: 1.25 !important;
      white-space: normal !important;
    }
    .exam-result-area .exam-next-btn.show,
    .learning-result-area .exam-next-btn.show {
      display: inline-flex !important;
    }

    /* 정답/오답 피드백: 박스 꿀렁임 제거, 버튼 타격감 중심 */
    .answer-btn.correct-choice {
      animation: hyAnswerCorrect2 .34s cubic-bezier(.18,.9,.2,1) both !important;
      box-shadow: 0 0 0 5px rgba(34,197,94,.14), 0 14px 32px rgba(21,128,61,.18) !important;
    }
    .answer-btn.wrong-choice {
      animation: hyAnswerWrong2 .34s ease both !important;
      box-shadow: 0 0 0 5px rgba(239,68,68,.14), 0 14px 32px rgba(185,28,28,.16) !important;
    }
    @keyframes hyAnswerCorrect2 {
      0% { transform: scale(1); }
      40% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    @keyframes hyAnswerWrong2 {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-7px); }
      45% { transform: translateX(6px); }
      70% { transform: translateX(-3px); }
    }

    /* 5. 제시문 탭: 라이브러리 제거, 칩 복구, 카드 가독성 */
    body.feature-page-active [data-feature-panel="passage"] .feature-filter-row { display: none !important; }
    body.feature-page-active [data-feature-panel="passage"] .passage-chip-row {
      display: flex !important;
      gap: 8px !important;
      overflow-x: auto !important;
      padding: 2px 2px 10px !important;
      margin-bottom: 8px !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-chip {
      flex: 0 0 auto !important;
      white-space: nowrap !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-library-grid {
      grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
      gap: 12px !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-library-card {
      grid-template-columns: 112px minmax(0,1fr) !important;
      min-height: 86px !important;
      align-items: start !important;
      padding: 15px 16px !important;
      border-radius: 18px !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-thinker {
      font-size: 14px !important;
      font-weight: 1000 !important;
      line-height: 1.35 !important;
      word-break: keep-all !important;
    }
    body.feature-page-active [data-feature-panel="passage"] .passage-excerpt {
      white-space: normal !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      line-height: 1.55 !important;
      font-size: 14px !important;
    }

    /* 6. Q&A: 상세 열기 유지, 좌측 정렬 */
    body.feature-page-active [data-feature-panel="qna"] .qna-item {
      grid-template-columns: minmax(0,1fr) auto !important;
      grid-template-areas: "question foot" "meta foot" !important;
      align-items: center !important;
      gap: 6px 12px !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-question {
      grid-area: question !important;
      text-align: left !important;
      justify-self: stretch !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-item-top {
      grid-area: meta !important;
      justify-content: flex-start !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-item-foot {
      grid-area: foot !important;
      justify-content: flex-end !important;
    }

    /* 7. 최근 제출 기록 좌측 정렬 + 클릭 대상 느낌 */
    .archive-btn,
    .archive-btn * {
      text-align: left !important;
      justify-content: flex-start !important;
    }
    .archive-btn {
      display: grid !important;
      grid-template-columns: minmax(170px, auto) auto minmax(0,1fr) auto !important;
      align-items: center !important;
      gap: 10px !important;
      cursor: pointer !important;
    }
    .archive-arrow { justify-self: end !important; }

    /* 8. 주제별 버튼 텍스트 중앙 정렬 */
    .topic-start-chip,
    body.feature-page-active [data-feature-panel="topic"] .topic-start-chip {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1 !important;
    }

    /* 9. 복습 예정 카드: 날짜 표시 + 클릭형 */
    .review-preview-item {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      gap: 8px 12px !important;
      align-items: center !important;
      cursor: pointer !important;
      text-align: left !important;
    }
    .review-preview-date {
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }
    .review-preview-question { grid-column: 1 / -1 !important; }

    /* 10. 전환 로딩 표시 */
    .route-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(248,250,252,.72);
      backdrop-filter: blur(8px);
    }
    .route-loading-overlay.show { display: flex; }
    .route-loading-card {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #ffffff;
      padding: 14px 16px;
      box-shadow: 0 18px 50px rgba(15,23,42,.12);
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 950;
    }

    @media (max-width: 760px) {
      .quick-launch-grid,
      body.feature-page-active .quick-launch-grid,
      .quick-launch-grid[data-study-home] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      body.feature-page-active [data-feature-panel="passage"] .passage-library-grid { grid-template-columns: 1fr !important; }
      body.feature-page-active [data-feature-panel="passage"] .passage-library-card { grid-template-columns: 86px minmax(0,1fr) !important; }
      body.exam-tab-active .exam-player-stage.exam-status-header { grid-template-columns: 1fr !important; }
      body.exam-tab-active .exam-status-grid { flex-wrap: wrap !important; }
      .exam-player-card.exam-chat-card,
      body.dedicated-ox-player .learning-chat-card {
        height: clamp(430px, calc(100dvh - 220px), 590px) !important;
        max-height: calc(100dvh - 206px) !important;
      }
      .archive-btn { grid-template-columns: 1fr auto !important; }
      .archive-meta { grid-column: 1 / -1 !important; }
    }

  

    /* HYUNWOO PATCH 2026-06-30B: route/launcher/OX dock/explanation rescue */
    :root {
      --hy-ox-dock-bottom: calc(16px + env(safe-area-inset-bottom));
      --hy-ox-dock-width: min(640px, calc(100vw - 28px));
    }

    /* 1. 바로가기: 한 줄로 전부 보이게. 카드 폭이 부족하면 열 수를 줄인다. */
    .quick-launch-grid,
    body.feature-page-active .quick-launch-grid,
    .quick-launch-grid[data-study-home] {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
      gap: 12px !important;
      overflow: visible !important;
    }
    .quick-launch-btn {
      display: grid !important;
      grid-template-columns: 38px minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      justify-items: start !important;
      column-gap: 12px !important;
      row-gap: 3px !important;
      min-height: 74px !important;
      padding: 14px 16px !important;
      overflow: visible !important;
      text-align: left !important;
    }
    .quick-launch-icon {
      grid-row: 1 / span 2 !important;
      grid-column: 1 !important;
      width: 38px !important;
      height: 38px !important;
      flex: 0 0 38px !important;
    }
    .quick-launch-title,
    .quick-launch-sub {
      grid-column: 2 !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      overflow-wrap: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: initial !important;
      text-align: left !important;
      z-index: 3 !important;
    }
    .quick-launch-title { font-size: 14px !important; line-height: 1.15 !important; }
    .quick-launch-sub { font-size: 11.5px !important; line-height: 1.2 !important; }

    /* 2. OX 화면에서는 기본 하단바 숨김. 빈 공간 탭 시 class로 잠깐 보이게. */
    body.exam-tab-active .bottom-tabbar,
    body.dedicated-ox-player .bottom-tabbar,
    body.player-active .bottom-tabbar,
    body.solving-active .bottom-tabbar {
      display: grid !important;
      transform: translateX(-50%) translateY(calc(100% + 30px)) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    body.ox-tabbar-peek.exam-tab-active .bottom-tabbar,
    body.ox-tabbar-peek.dedicated-ox-player .bottom-tabbar,
    body.ox-tabbar-peek.player-active .bottom-tabbar,
    body.ox-tabbar-peek.solving-active .bottom-tabbar {
      transform: translateX(-50%) translateY(0) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    /* OX dock은 하단바와 무관하게 안정적인 keyboard 위치로 고정 */
    .learning-player-dock.floating-answer-dock,
    .exam-choice-area.exam-fixed-answer-dock {
      position: fixed !important;
      left: 50% !important;
      bottom: var(--hy-ox-dock-bottom) !important;
      width: var(--hy-ox-dock-width) !important;
      transform: translateX(-50%) !important;
      z-index: 52000 !important;
      display: block !important;
      padding: 8px !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.985) !important;
      border: 1px solid rgba(203,213,225,.98) !important;
      box-shadow: 0 18px 46px rgba(15,23,42,.16) !important;
      backdrop-filter: blur(16px) !important;
    }
    .learning-player-dock.hidden,
    .exam-choice-area.hidden {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .learning-player-dock.feedback-correct,
    .learning-player-dock.feedback-wrong {
      bottom: var(--hy-ox-dock-bottom) !important;
      z-index: 54000 !important;
      min-height: 74px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
    }

    @media (min-width: 901px) {
      body.exam-tab-active #examPracticeBox {
        position: relative !important;
        padding-bottom: 84px !important;
      }

      body.exam-tab-active #examPracticeBox > .exam-choice-area.exam-fixed-answer-dock {
        position: absolute !important;
        left: 50% !important;
        bottom: 18px !important;
        width: min(620px, calc(100% - 56px)) !important;
        max-width: 620px !important;
        transform: translateX(-50%) !important;
      }
    }

    /* 3. 평가원 상단 상태바 세로/가로 여유 */
    body.exam-tab-active .exam-player-stage.exam-status-header,
    body.exam-tab-active .exam-status-header {
      min-height: 96px !important;
      padding: 20px 22px !important;
      border-radius: 24px !important;
      grid-template-columns: minmax(320px, 1fr) auto !important;
      gap: 18px !important;
    }
    body.exam-tab-active .exam-player-title {
      font-size: 24px !important;
      line-height: 1.2 !important;
    }
    body.exam-tab-active .exam-player-subtitle {
      font-size: 14px !important;
      line-height: 1.4 !important;
    }
    body.exam-tab-active .exam-status-item {
      min-width: 92px !important;
      height: 52px !important;
      padding: 8px 12px !important;
    }
    body.exam-tab-active .exam-status-item span,
    body.exam-tab-active .exam-status-item strong {
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }
    body.exam-tab-active .exam-streak-status { min-width: 104px !important; }

    /* 더보기는 최상위 레이어 */
    body.exam-tab-active .exam-kebab-menu,
    body.exam-tab-active .exam-kebab-menu[open],
    body.exam-tab-active .exam-kebab-panel {
      z-index: 110000 !important;
      overflow: visible !important;
      pointer-events: auto !important;
    }
    body.exam-tab-active .exam-kebab-panel {
      width: min(390px, calc(100vw - 24px)) !important;
      max-height: min(620px, calc(100dvh - 116px)) !important;
      overflow-y: auto !important;
      box-shadow: 0 28px 80px rgba(15,23,42,.28) !important;
    }

    /* 4. OX 카드 높이 고정 + 해설 박스 자체가 스크롤 */
    .exam-player-card.exam-chat-card,
    body.dedicated-ox-player .learning-chat-card {
      height: clamp(500px, calc(100dvh - 240px), 680px) !important;
      min-height: 500px !important;
      max-height: calc(100dvh - 194px) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      padding: 14px !important;
      transform: none !important;
    }
    .exam-question-box.exam-chat-window,
    .learning-chat-window {
      position: relative !important;
      flex: 0 0 auto !important;
      min-height: 150px !important;
      max-height: 42% !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 17px 18px !important;
    }
    .exam-player-card.exam-answered .exam-question-box.exam-chat-window,
    .learning-has-feedback .learning-chat-window,
    .learning-has-feedback .exam-question-box.exam-chat-window {
      min-height: 124px !important;
      max-height: 32% !important;
      padding: 14px 15px !important;
    }
    .exam-result-area,
    .learning-result-area {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .exam-feedback,
    .feedback {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: none !important;
      flex-direction: column !important;
      gap: 9px !important;
      overflow: hidden !important;
    }
    .exam-feedback.show,
    .feedback.show {
      display: flex !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding-right: 5px !important;
    }
    .exam-explanation,
    .explanation {
      flex: 0 0 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      padding-right: 0 !important;
    }
    .exam-explanation.explanation-hidden,
    .explanation.explanation-hidden { display: none !important; }
    .exam-feedback .exam-next-btn.show,
    .feedback .exam-next-btn.show {
      position: sticky !important;
      bottom: 0 !important;
      z-index: 3 !important;
      margin-top: 12px !important;
      flex: 0 0 auto !important;
    }

    /* 북마크/오류제보를 축소 선지 박스 우측 상단으로 이동한 뒤의 모양 */
    .exam-question-box .question-box-actions {
      position: absolute !important;
      right: 12px !important;
      top: 12px !important;
      display: inline-flex !important;
      gap: 6px !important;
      align-items: center !important;
      z-index: 8 !important;
      margin: 0 !important;
    }
    .exam-player-card.exam-answered .exam-question-box .question-label,
    .learning-has-feedback .exam-question-box .question-label {
      padding-right: 190px !important;
    }
    .exam-question-box .question-box-actions .tiny-btn {
      min-width: 68px !important;
      min-height: 30px !important;
      padding: 0 9px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    /* 5. Q&A 날짜 chip: 제목 옆에 어정쩡하게 떠 보이지 않게 메타줄 우측 보조정보로 */
    body.feature-page-active [data-feature-panel="qna"] .qna-item-top {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex-wrap: nowrap !important;
      min-width: 0 !important;
    }
    body.feature-page-active [data-feature-panel="qna"] .qna-time {
      margin-left: auto !important;
      order: 99 !important;
      opacity: .82 !important;
      background: #fff !important;
    }

    /* 6. 복습 예정 목록: 날짜/출처/문항만 보이되 클릭 카드로 명확하게 */
    .review-preview-item {
      display: grid !important;
      grid-template-columns: minmax(0,1fr) auto !important;
      grid-template-areas: "meta date" "question question" !important;
      gap: 7px 12px !important;
      align-items: center !important;
      cursor: pointer !important;
    }
    .review-preview-meta { grid-area: meta !important; margin: 0 !important; }
    .review-preview-date { grid-area: date !important; white-space: nowrap !important; }
    .review-preview-question { grid-area: question !important; }

    /* 7. 주제별 시작/이어하기 버튼 중앙 정렬 재보강 */
    .topic-start-chip,
    body.feature-page-active [data-feature-panel="topic"] .topic-start-chip,
    body.feature-page-active [data-feature-panel="topic"] .topic-course-footer .topic-start-chip {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1 !important;
      min-width: 66px !important;
      height: 32px !important;
    }

    @media (max-width: 760px) {
      .quick-launch-grid,
      body.feature-page-active .quick-launch-grid,
      .quick-launch-grid[data-study-home] { grid-template-columns: 1fr !important; }
      body.exam-tab-active .exam-player-stage.exam-status-header,
      body.exam-tab-active .exam-status-header {
        min-height: 112px !important;
        grid-template-columns: 1fr !important;
      }
      body.exam-tab-active .exam-status-grid { flex-wrap: wrap !important; }
      .exam-player-card.exam-chat-card,
      body.dedicated-ox-player .learning-chat-card {
        height: clamp(500px, calc(100dvh - 210px), 660px) !important;
        max-height: calc(100dvh - 172px) !important;
      }
    }

  
    /* HYUNWOO V7: OX dock/feedback/peek legacy locks moved to ox-player.css.
       Keep only route boot flash suppression here. */
    body.hy-route-boot .app:not(.app-hidden) {
      visibility: hidden !important;
    }

    body.hy-route-boot .home-daily-label,
    body.hy-route-boot .study-hero-card,
    body.hy-route-boot .today-task-card,
    body.hy-route-boot .home-shortcut-label,
    body.hy-route-boot .quick-launch-grid[data-study-home],
    body.hy-route-boot .home-storage-label,
    body.hy-route-boot .dashboard-grid[data-study-home] {
      display: none !important;
    }

    
/* HYUNWOO V14: ox card/result parity visuals moved out of app.css. */
body.exam-tab-active .exam-kebab-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      align-items: stretch !important;
    }

    body.exam-tab-active .exam-kebab-actions .exam-control-btn,
    body.exam-tab-active .exam-kebab-actions .exam-control-btn:last-child {
      grid-column: auto !important;
      width: 100% !important;
      min-width: 0 !important;
      white-space: nowrap !important;
    }

    body.exam-tab-active .exam-kebab-panel label.exam-kebab-check {
      display: grid !important;
      grid-template-columns: 18px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 0 8px !important;
      padding: 8px 2px !important;
    }

    body.exam-tab-active .exam-kebab-panel label.exam-kebab-check input {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      align-self: center !important;
    }

    body.exam-tab-active .exam-kebab-panel label.exam-kebab-check span {
      line-height: 1.2 !important;
      white-space: normal !important;
    }

    #examResetInlineBtn,
    #examResetInlineBtnStage {
      display: none !important;
    }

    
/* HYUNWOO V14: leaderboard streak smoke polish moved to ui-polish.css. */

/* HYUNWOO V14: global frame lock moved out of app.css. */

/* HYUNWOO V14: bottom tabbar final polish moved out of app.css. */
/* 데스크톱 평가원 OX: 흰색 카드 크기는 유지하고, 내부 회색 문제 박스만 덜 길게 */    /* 데스크톱 평가원 OX: 흰색 카드 크기는 유지하고, 내부 회색 문제 박스만 덜 길게 */
    @media (min-width: 901px) {
      body.exam-tab-active #examPracticeBox {
        position: relative !important;
        overflow: visible !important;
        padding-bottom: calc(var(--hy-ox-desktop-choice-h) + 22px) !important;
      }

      body.exam-tab-active .exam-player-card.exam-chat-card {
        position: relative !important;
        min-height: clamp(420px, 56vh, 620px) !important;
        height: auto !important;
        padding-bottom: 14px !important;
      }

      body.exam-tab-active #examPracticeBox:not(.exam-has-feedback) .exam-question-box.exam-chat-window {
        flex: 0 0 auto !important;
        height: var(--hy-ox-standard-question-h) !important;
        min-height: 210px !important;
        max-height: var(--hy-ox-standard-question-h) !important;
        overflow-y: auto !important;
        margin-bottom: auto !important;
      }

      /* HYUNWOO V7: desktop exam answer dock remains viewport-fixed in ox-player.css. */
    }

    /* 주제별/오답 재도전 OX: 회색 문제 박스를 평가원 탭과 같은 체감 크기로 통일 */
    @media (min-width: 901px) {
      body.dedicated-ox-player .topic-panel:not(.learning-has-feedback) .exam-question-box.exam-chat-window,
      body.dedicated-ox-player .review-panel:not(.learning-has-feedback) .exam-question-box.exam-chat-window,
      body.feature-page-active .topic-panel:not(.learning-has-feedback) .exam-question-box.exam-chat-window,
      body.feature-page-active .review-panel:not(.learning-has-feedback) .exam-question-box.exam-chat-window {
        flex: 0 0 auto !important;
        height: var(--hy-ox-standard-question-h) !important;
        min-height: 210px !important;
        max-height: var(--hy-ox-standard-question-h) !important;
        overflow-y: auto !important;
        margin-bottom: auto !important;
      }

      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) {
        position: relative !important;
        padding-bottom: calc(var(--hy-ox-desktop-choice-h) + 22px) !important;
      }

      /* HYUNWOO V7: topic/review answer dock remains viewport-fixed in ox-player.css. */
    }

    
/* HYUNWOO V14: qna item final layout moved out of app.css. */

/* HYUNWOO V14: ox question scroll final lock moved out of app.css. */

/* V31.83: attached-question Q&A composer */
body.question-composer-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.question-composer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300000;
  display: grid;
  place-items: stretch center;
  overflow: hidden;
  background: #f5f7fb;
  color: var(--text);
}

.question-composer-overlay.hidden {
  display: none !important;
}

.question-composer-shell {
  width: min(720px, 100%);
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #f5f7fb;
}

.question-composer-head {
  min-height: calc(70px + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: env(safe-area-inset-top) 16px 0;
  background: rgba(245, 247, 251, 0.96);
}

.question-composer-head h2 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: clamp(19px, 4.8vw, 23px);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -0.045em;
  text-align: center;
}

.question-composer-back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}

.question-composer-back:active {
  background: rgba(226, 232, 240, 0.72);
  transform: scale(0.97);
}

.question-composer-back svg {
  width: 23px;
  height: 23px;
}

.question-composer-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 30px 16px 24px;
  scrollbar-gutter: stable;
}

.question-composer-context {
  width: 100%;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft);
}

.question-composer-context-head {
  min-height: 24px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.question-composer-context-head > svg {
  width: 18px;
  height: 18px;
}

.question-composer-context-head button {
  min-width: 44px;
  min-height: 44px;
  margin: -10px -8px -10px 0;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.question-composer-context-head button:active {
  background: rgba(226, 232, 240, 0.72);
}

.question-composer-context-body {
  display: block;
  padding-top: 14px;
}

.question-composer-context-body[hidden] {
  display: none !important;
}

.question-composer-context-body > strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.45;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.question-composer-context-body > p {
  margin: 9px 0 14px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -0.02em;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.question-composer-answer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.question-composer-answer-chips span {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.question-composer-form {
  margin-top: 18px;
}

.question-composer-field-label {
  display: block;
  margin: 0 3px 9px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.question-composer-form textarea {
  width: 100%;
  min-height: clamp(200px, 29dvh, 300px);
  display: block;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 19px;
  outline: 0;
  background: #ffffff;
  color: var(--text);
  padding: 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.02em;
  caret-color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.question-composer-form textarea::placeholder {
  color: var(--muted-light);
}

.question-composer-form textarea:focus {
  border-color: #aab6c7;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.11);
}

.question-composer-scope-label {
  margin-top: 18px;
}

.question-composer-scope {
  position: relative;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
}

.question-composer-scope select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text);
  padding: 0 46px 0 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.question-composer-scope svg {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--text);
  pointer-events: none;
}

.question-composer-scope-hint {
  margin: 7px 3px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

.question-composer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 9px;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(245, 247, 251, 0.88), #f5f7fb 16px);
}

.question-composer-actions button {
  min-width: 0;
  min-height: 52px;
  border-radius: 17px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.question-composer-draft {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text-soft);
}

.question-composer-draft.is-saved {
  border-color: #86e6b3;
  background: #effcf5;
  color: #069b58;
}

.question-composer-submit {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #ffffff;
}

.question-composer-actions button:active {
  transform: scale(0.985);
}

.question-composer-actions button:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}

.question-composer-overlay button:focus-visible,
.question-composer-overlay select:focus-visible,
.question-composer-overlay textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.16);
}

body.question-composer-open .toast {
  z-index: 300100 !important;
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

@media (min-width: 721px) {
  .question-composer-shell {
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    border-left: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 0 42px rgba(15, 23, 42, 0.06);
  }

  .question-composer-scroll {
    padding-right: 24px;
    padding-left: 24px;
  }

  .question-composer-actions {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 360px), (max-height: 720px) {
  .question-composer-head {
    min-height: calc(62px + env(safe-area-inset-top));
    padding-right: 10px;
    padding-left: 10px;
  }

  .question-composer-head h2 {
    font-size: 18px;
  }

  .question-composer-scroll {
    padding: 20px 12px 18px;
  }

  .question-composer-context {
    padding: 15px 14px;
    border-radius: 18px;
  }

  .question-composer-form textarea {
    min-height: 180px;
  }

  .question-composer-actions {
    padding-right: 12px;
    padding-left: 12px;
  }

  .question-composer-actions button {
    min-height: 48px;
    border-radius: 15px;
    font-size: 14px;
  }
}