body {
  /* background-image: url('/images/background.jpg');
  設定背景圖片 */
  background-size: cover;
  /* 背景圖片覆蓋整個頁面 */
  background-position: center;
  /* 背景圖片居中顯示 */
  background-attachment: fixed;
  /* 背景固定，隨頁面滾動 */
  margin: 0;
  /* 移除頁面的預設邊距 */
  height: 100vh;
  /* 設定 body 佔據整個視窗高度 */
  display: flex;
  justify-content: flex-start;
  /* 將內容從上往下排列 */
  align-items: center;
  /* 水平置中所有內容 */
  text-align: center;
  flex-direction: column;
  /* 垂直排列內容 */
  overflow: hidden;
  /* 禁用頁面滾動 */
}

.title_div {
  position: absolute;
  width: 100%;
  font-weight: normal;
  /* 預設為正常字重 */
  top: 10%;
  left: 50%;
  /* 設定 title 在視窗高度的 10% 位置 */
  transform: translateX(-50%);
  /* 讓整個文字區塊居中 */
}

.index_content_div {
  position: absolute;
  width: 70%;
  max-width: 500px;
  font-weight: normal;
  /* 預設為正常字重 */
  top: 65%;
  left: 50%;
  /* 設定 content 在視窗高度的 65% 位置 */
  transform: translateX(-50%);
  /* 讓整個文字區塊居中 */
}

.content_div {
  margin: 150px auto;
  width: 85%;
  max-width: 500px;
  font-weight: normal;
  /* 預設為正常字重 */
  top: 20%;
  left: 60%;
  /* 設定 content 在視窗高度的 65% 位置 */
  transform: translateX(0%);
  /* 讓整個文字區塊居中 */
  white-space: pre-wrap;
  /* 自動換行 */
}

.content_div_input {
  width: 85%;
  max-width: 500px;
  margin: 10px auto;
  font-weight: normal;
  white-space: pre-wrap;
  text-align: left;
}

.content_div_question {
  width: 85%;
  max-width: 500px;
  margin: 200px auto;
  font-weight: normal;
  white-space: pre-wrap;
  text-align: left;
}

.input_box {
  width: 85%;
  max-width: 500px;
  padding: 8px 12px;
  margin: 5px auto 20px auto;
  display: block;
  /* 讓它單獨一行 */
  font-size: 16px;
}

/* 通用設定：設定兩行 h1 的字體顏色 */
h1 {
  color: rgba(0, 0, 0, 1);
  /* 設定字體顏色 */
  text-align: center;
  /* 置中顯示 */
}

p {
  color: rgba(0, 0, 0, 1);
  /* 設定字體顏色 */
  font-size: 16px;
}

/* 設定 title 的樣式 */
.title {
  font-size: 48px;
  margin: 0;
  font-weight: normal;
}

/* 設定 subtitle 的樣式 */
.subtitle {
  font-size: 26px;
  margin: 10px;
}

.content_left {
  text-align: left;
}

.content_right {
  text-align: right;
}

.scrollable_p {
  max-height: 60vh;
  /* 設定指定的高度 */
  overflow-y: auto;
  /* 讓內容在超出高度範圍時可以滾動 */
  padding: 10px;
  /* 添加一些內邊距，讓文字不會貼著邊緣 */
  text-align: left;
  line-height: 30px;
}

.textarea_box {
  width: 100%;
  /* 寬度滿版 */
  height: 350px;
  /* 設定最大高度為 350px */
  /* background: linear-gradient(to bottom, rgba(143, 65, 102, 1), rgba(65, 34, 109, 1));
  漸層背景 */
  background-color: brown;
  border: none;
  margin-top: 20px;
  /* 去掉邊框 */
  padding: 20px;
  /* 內邊距 */
  font-size: 16px;
  /* 設定字體大小 */
  color: white;
  
  /* 設定文字顏色 */
  border-radius: 4px;
  /* 可以加點圓角 */
  box-sizing: border-box;
  /* 確保 padding 不會影響到元素的總寬度 */
  margin-top: 20px;
  resize: none;
}

.button {
  position: absolute;
  bottom: 5%;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  /*background-image: url('/images/button_background.jpg');*/
  /* 設定背景圖片 */
  background-color: brown;
  /* 設定背景顏色 */
  background-size: cover;
  /* 背景圖片覆蓋整個頁面 */
  color: rgba(255, 228, 222, 1);
  /* 按鈕文字顏色 */
  border: 1px solid rgba(255, 228, 222, 1);
  /* 邊框顏色設為 rgba(255, 228, 222, 1) */
  border-radius: 25px;
  /* 圓角 */
  width: 60%;
  /* 預設寬度為 60% 螢幕寬度 */
  max-width: 400px;
  /* 當寬度大於 400px 時，最大寬度為 400px */
  text-align: center;
  /* 文字置中 */
}

/* Loading dialog */
.loading_dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 50%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex; /* 使用 Flexbox 排版 */
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
  color: white;
  font-size: 18px;
  z-index: 1000; /* 確保位於最上層 */
  flex-direction: column;
}

.spinner {
  border: 4px solid rgba(65, 34, 109, 1);
  border-top: 4px solid rgba(143, 65, 102, 1);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* 自定義滾動條樣式 (Webkit 瀏覽器) */
.scrollable_p::-webkit-scrollbar {
  width: 3px;
  /* 設定滾動條的寬度 */
}

/* 設定滾動條背景 */
.scrollable_p::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 設定滾動條背景色 */
  border-radius: 10px;
  /* 設定背景圓角 */
}

/* 設定滾動條的滑塊 */
.scrollable_p::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 1);
  /* 滑塊顏色 */
  border-radius: 10px;
  /* 滑塊圓角 */
}

/* 滑塊的 hover 效果 */
.scrollable_p::-webkit-scrollbar-thumb:hover {
  background: rgba(85, 85, 85, 1);
  /* 滑塊在 hover 時變暗 */
}

.textarea_box::placeholder {
  white-space: pre-wrap;
  /* 允許 placeholder 換行 */
  color: rgba(248, 230, 230, 0.6);
  /* 設定 placeholder 文字顏色為 #F8E6E6 */
}