.question-shell {
      position: relative;
      z-index: 1;
      width: min(100% - 24px, 1100px);
      margin: 40px auto;
    }

    .question-hero {
      position: relative;
      overflow: hidden;
      padding: 28px 24px 24px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)),
        var(--card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .question-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(440px 220px at 0% 0%, rgba(56, 189, 248, 0.18), transparent 70%),
        radial-gradient(400px 220px at 100% 0%, rgba(14, 165, 233, 0.14), transparent 70%);
      pointer-events: none;
    }

    .question-kicker {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(125, 211, 252, 0.24);
      background: rgba(8, 47, 73, 0.46);
      color: #effbff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .question-title {
      position: relative;
      margin: 16px 0 0;
      font-size: clamp(28px, 5vw, 40px);
      line-height: 1.1;
      font-weight: 900;
      color: #111827;
    }

    .question-subtitle {
      position: relative;
      margin: 12px 0 0;
      padding: 16px 20px;
      border-radius: 18px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(148, 163, 184, 0.2);
      color: #0f172a;
      font-size: 15px;
      line-height: 1.7;
      font-weight: 700;
    }

    .question-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      margin-top: 22px;
    }

    .question-card {
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: rgba(255,255,255,0.94);
      box-shadow: 0 18px 36px rgba(2, 8, 22, 0.12);
      padding: 22px;
    }

    .question-card h2 {
      margin: 0 0 12px;
      font-size: 22px;
      color: #0f172a;
    }

    .question-card p,
    .question-card li {
      margin: 0;
      color: #334155;
      line-height: 1.75;
    }

    .question-card ul {
      margin: 0;
      padding-left: 18px;
    }

    .question-image-wrap {
      border-radius: 20px;
      overflow: hidden;
      background: #e2e8f0;
      border: 1px solid rgba(148, 163, 184, 0.2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    }

    



    .question-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .question-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 16px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 800;
      border: 1px solid rgba(148, 163, 184, 0.24);
      background: linear-gradient(135deg, #1d9bf0, #2563eb);
      color: #fff;
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
    }

    
    .choice-list {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .choice-list li {
      color: #0f172a;
      font-weight: 700;
      line-height: 1.5;
    }

    .answer-btn {
      border: 1px solid rgba(37, 99, 235, 0.26);
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      color: #1d4ed8;
    }

    .answer-box {
      display: none;
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(59, 130, 246, 0.18);
      background: rgba(239, 246, 255, 0.9);
      color: #0f172a;
      line-height: 1.65;
    }

    .answer-box.is-open {
      display: block;
    }

    .answer-box strong {
      color: #1d4ed8;
    }

    .simulation-letterbox {
      margin-top: 18px;
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: rgba(255,255,255,0.94);
      box-shadow: 0 18px 36px rgba(2, 8, 22, 0.12);
      padding: 22px;
    }

    .simulation-letterbox h2 {
      margin: 0 0 12px;
      font-size: 22px;
      color: #0f172a;
    }

    .simulation-box {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 210px;
      border-radius: 20px;
      border: 1px dashed rgba(59, 130, 246, 0.32);
      background:
        linear-gradient(180deg, rgba(239,246,255,0.95), rgba(219,234,254,0.88));
      color: #1e3a8a;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-align: center;
      padding: 20px;
    }

    .simulation-split {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .simulation-panel {
      min-height: 210px;
      border-radius: 20px;
      border: 1px solid rgba(59, 130, 246, 0.24);
      background: linear-gradient(180deg, rgba(219,234,254,0.96), rgba(191,219,254,0.92));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .simulation-panel-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 40px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.14);
      color: #1d4ed8;
      font-weight: 900;
      letter-spacing: 0.04em;
    }

        .simulation-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      margin-top: 16px;
      width: 100%;
    }
    .sim-orbit {
      width: 100%;
      height: 100%;
      display: block;
    }

    .sim-orbit text {
      fill: #1f2937;
      font-family: "Segoe UI", "Malgun Gothic", sans-serif;
    }

    .sim-orbit-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      height: 100%;
    }

    .sim-orbit-stage {
      flex: 1 1 auto;
      min-height: 0;
    }

    .sim-orbit-controls {
      display: flex;
      justify-content: center;
    }

    .sim-start-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(37, 99, 235, 0.24);
      background: linear-gradient(135deg, #ffffff, #dbeafe);
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
      cursor: pointer;
      padding: 0;
    }

    .sim-start-btn img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      display: block;
    }

    .sim-reset-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      background: linear-gradient(135deg, #ffffff, #f1f5f9 52%, #dbeafe 100%);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255,255,255,0.85);
      cursor: pointer;
      padding: 0;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
    }

    .sim-reset-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(96, 165, 250, 0.42);
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.92);
      filter: brightness(1.02);
    }

    .sim-reset-btn:active {
      transform: translateY(0);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255,255,255,0.8);
    }

    .sim-reset-btn img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      display: block;
    }
    

@media (max-width: 800px) {
  .question-shell {
    width: calc(100% - 8px);
    margin: 14px auto 24px;
  }

  .question-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .question-card {
    border-radius: 18px;
    padding: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .question-card h2,
  .simulation-letterbox h2 {
    font-size: 18px;
  }

  .question-image-wrap {
    border-radius: 14px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .question-image-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .choice-list {
    gap: 4px;
  }

  .question-actions {
    gap: 6px;
  }

  .question-btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .simulation-letterbox {
    margin-top: 14px;
    border-radius: 18px;
    padding: 14px;
  }

  .simulation-split {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .simulation-panel {
    min-height: 190px;
    border-radius: 16px;
    padding: 10px;
    gap: 8px;
  }

  .simulation-panel-body {
    border-radius: 12px;
    padding: 8px;
  }

  .simulation-panel-label {
    min-width: 34px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .simulation-actions {
    gap: 10px;
    margin-top: 12px;
  }

  .sim-start-btn,
  .sim-reset-btn {
    width: 46px;
    height: 46px;
  }

  .sim-start-btn img,
  .sim-reset-btn img {
    width: 22px;
    height: 22px;
  }

  .simulation-timebar {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    gap: 8px;
  }

  .simulation-current-time {
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
  }
}
/* Q_18 mobile timebar fix */
.simulation-timebar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.simulation-current-time {
  width: 100%;
  text-align: center;
  display: block;
}

.simulation-slider {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

@media (max-width: 800px) {
  .simulation-timebar {
    width: 100%;
    max-width: 100%;
    padding: 10px 10px;
    margin: 12px 0 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .simulation-current-time {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
  }

  .simulation-slider {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

html[data-site-theme="dark"] .question-title,
html[data-site-theme="dark"] .question-card h2,
html[data-site-theme="dark"] .simulation-letterbox h2 {
  color: #f8fbff;
}

html[data-site-theme="dark"] .question-subtitle,
html[data-site-theme="dark"] .question-card,
html[data-site-theme="dark"] .simulation-letterbox {
  background: rgba(8, 18, 34, 0.9);
  border-color: rgba(154, 182, 214, 0.2);
  color: #dbeafe;
  box-shadow: 0 20px 48px rgba(2, 8, 22, 0.32);
}

html[data-site-theme="dark"] .question-card li,
html[data-site-theme="dark"] .answer-box,
html[data-site-theme="dark"] .simulation-current-time {
  color: #d6e5f6;
}

html[data-site-theme="dark"] .choice-list li {
  color: #eef6ff;
}

html[data-site-theme="dark"] .question-image-wrap,
html[data-site-theme="dark"] .simulation-panel-body,
html[data-site-theme="dark"] .simulation-timebar {
  background: rgba(10, 22, 40, 0.92);
  border-color: rgba(154, 182, 214, 0.18);
}

html[data-site-theme="dark"] .simulation-panel {
  background: linear-gradient(180deg, rgba(10, 32, 58, 0.95), rgba(7, 20, 36, 0.94));
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-site-theme="dark"] .simulation-panel-label,
html[data-site-theme="dark"] .answer-box strong {
  color: #8ec5ff;
}

html[data-site-theme="dark"] .sim-graph text {
  fill: #f8fbff;
}

html[data-site-theme="dark"] .sim-graph rect,
html[data-site-theme="dark"] .sim-graph > line,
html[data-site-theme="dark"] #q18-graph-path {
  stroke: #f8fbff !important;
}

html[data-site-theme="dark"] #q18-grid-lines line {
  stroke: rgba(248, 251, 255, 0.35) !important;
}

html[data-site-theme="dark"] #q18-arrowhead polygon {
  fill: #f8fbff !important;
}

html[data-site-theme="dark"] .sim-orbit line,
html[data-site-theme="dark"] .sim-orbit path[marker-end="url(#q18-arrowhead)"] {
  stroke: #f8fbff !important;
}

html[data-site-theme="dark"] .question-btn.secondary,
html[data-site-theme="dark"] .answer-btn {
  background: linear-gradient(135deg, rgba(12, 37, 66, 0.96), rgba(17, 58, 104, 0.94));
  border-color: rgba(96, 165, 250, 0.24);
  color: #dbeafe;
}