:root {
  --line-width: 800px;
  --line-font-size: 64px;
  --line-height: 1.2;
  --line-padding-x: 8px;
  --line-border: 1px solid #c0c0c0;

  --body-background-color: #ffffff;
  --body-color: #000000;
  
  --title-color: #808080;
  --score-color: #808080;
  
  --score-correct-color: #8080f0;
  --score-wrong-color: #f08080;

  --char-default-color: #000000;
  --char-correct-color: #8080f0;
  --char-wrong-color: #f08080;
  
  --target-back-color: #f0f0f0;
  --editor-back-color: #f0f0ff;
}

body {
  font-family: sans-serif;
  text-align: center;
  margin: 50px;
  background-color: var(--body-background-color);
  color: var(--body-color);
}

#title {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: bold;
  color: var(--title-color);
  margin-bottom: 6px;
}

#result {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: bold;
  margin: 15px 0 30px;
  color: var(--score-color);
}

/* --- スコア欄の判定カラー --- */
#result[data-status="correct"] {
  color: var(--score-correct-color);
}
#result[data-status="wrong"] {
  color: var(--score-wrong-color);
}

.line {
  width: var(--line-width);
  margin: 10px auto;
  box-sizing: border-box;
  font-family: monospace;
  font-size: var(--line-font-size);
  line-height: var(--line-height);
}

#target {
  font-family: monospace;
  padding: 6px var(--line-padding-x);
  border: var(--line-border);
  background: var(--target-back-color);
  color: var(--char-default-color);
  text-align: left;
  white-space: pre;
  min-height: calc(1em * var(--line-height) + 20px);
}

#editor {
  display: block;
  width: var(--line-width);
  margin: 10px auto;
  box-sizing: border-box;
  font-family: monospace;
  font-size: var(--line-font-size);
  line-height: var(--line-height);
  padding: 6px var(--line-padding-x);
  border: var(--line-border);
  background: var(--editor-back-color);
  color: var(--char-default-color);
  text-align: left;
  outline: none;
  overflow: hidden;
  height: calc(1em * var(--line-height) + 20px);
  min-height: calc(1em * var(--line-height) + 20px);
  resize: none;
}

#exp, #dl {
  white-space: pre-wrap;
  text-align: left;
  width: 500px;
  padding: 20px;
  margin: 50px auto;
  border: var(--line-border);
  background-color: var(--body-background-color);
  color: var(--body-color);
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
}

/* --- JS切り替え・クラス指定用 --- */
.align-center {
  text-align: center !important;
}
.align-left {
  text-align: left !important;
}

.char-default {
  color: var(--char-default-color);
}
.char-correct {
  color: var(--char-correct-color);
}
.char-wrong {
  color: var(--char-wrong-color);
}