/* 版面與色彩 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f6f7fb;
  color: #333;
  height: 100vh;             /* 讓畫面高度佔滿整個視窗 */
  display: flex;             /* 用 flex 容器 */
}

.exam_container {
  flex: 0.5;                   /* 各佔一半寬度 */
  padding: 20px;
  box-sizing: border-box;    /* 避免 padding 撐爆 */
  overflow-y: auto;          /* 內容過多時出現捲軸 */
}

.js_editor {
  flex: 1.5;                   /* 各佔一半寬度 */
  padding: 20px;
  box-sizing: border-box;    /* 避免 padding 撐爆 */
  overflow-y: auto;          /* 內容過多時出現捲軸 */
}

/* exam_container 加個背景區隔 */
.exam_container {
  background: #e8f1ff;
  border-right: 1px solid #cfe0ff;
}

/* js_editor 保持白底 */
.js_editor {
  background: #fff;
}

/* Monaco Editor 高度改成視窗高度的一部分 */
.monaco_editor {
  height: calc(100vh - 140px); /* 減去按鈕與 padding 的高度 */
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #1e1e1e;
  margin-bottom: 12px;
}

.editor_buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.editor_buttons button {
  padding: 8px 14px;
  border: 1px solid #d0d0d0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
.editor_buttons button:hover { transform: translateY(-1px); }

#result {
  min-height: 24px;
  font-weight: 600;
}

#nextBtn { display: none; }