/* 文字重點標示樣式 */

/* ========== 文字顏色 ========== */
.text-red {
  color: #F96464;
}

.text-blue {
  color: #009EEB;
}

.text-green {
  color: #25A543;
}

.text-yellow {
  color: #FBE567;
}

.text-orange {
  color: #FC9800;
}

.text-gray {
  color: #C1C1C1;
}

/* ========== 底線 ========== */
.underline-red {
  text-decoration: underline;
  text-decoration-color: #F96464;
  text-decoration-thickness: 2px;
}

.underline-blue {
  text-decoration: underline;
  text-decoration-color: #009EEB;
  text-decoration-thickness: 2px;
}

.underline-green {
  text-decoration: underline;
  text-decoration-color: #25A543;
  text-decoration-thickness: 2px;
}

.underline-yellow {
  text-decoration: underline;
  text-decoration-color: #FBE567;
  text-decoration-thickness: 2px;
}

.underline-orange {
  text-decoration: underline;
  text-decoration-color: #FC9800;
  text-decoration-thickness: 2px;
}

.underline-gray {
  text-decoration: underline;
  text-decoration-color: #C1C1C1;
  text-decoration-thickness: 2px;
}

/* ========== 螢光筆（背景色） ========== */
/* 使用 linear-gradient 讓背景色只覆蓋文字底部 60%，頂部 40% 保持透明 */
.highlight-red {
  background: linear-gradient(to top, #FDC1C1 60%, transparent 60%);
  padding: 2px 4px;
  border-radius: 2px;
}

.highlight-blue {
  background: linear-gradient(to top, #99D8F7 60%, transparent 60%);
  padding: 2px 4px;
  border-radius: 2px;
}

.highlight-green {
  background: linear-gradient(to top, #ABEBBB 60%, transparent 60%);
  padding: 2px 4px;
  border-radius: 2px;
}

.highlight-yellow {
  background: linear-gradient(to top, #FBE567 60%, transparent 60%);
  padding: 2px 4px;
  border-radius: 2px;
}

.highlight-gray {
  background: linear-gradient(to top, #E0E0E0 60%, transparent 60%);
  padding: 2px 4px;
  border-radius: 2px;
}