.btn-instructions-style {
    /* 顏色和透明度 (範例：改成藍色) */
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.7) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    /* 滑鼠 Hover 效果 */
    --bs-btn-hover-bg: rgba(0, 0, 0, 1) !important;
    --bs-btn-hover-border-color: rgba(0, 0, 0, 1) !important;

    /* 形狀 (範例：改成方形) */
    border-radius: 10pt !important; 
    
    /* 文字樣式 (白色) */
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    text-shadow: none !important;
    
    /* 字體大小 (範例：使用預設大小，不指定) */
}

.btn-instructions-style:hover {
    /* (您希望 hover 時變成 100% 不透明的黑色) */
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.8) !important;

    /* (文字顏色保持不變) */
    color: #fff !important;
}

/* 1. 這是方框 <label> 本身 */
.radio-boxed {
  display: flex;
  align-items: center;   /* [!!] 讓它們垂直置中 [!!] */
  cursor: pointer;       /* 滑鼠變手指 */
  width: 100%; /* (範例：固定長度為 150px) */
  justify-content: center; /* 讓內容在方框內水平置中 */

  /* --- 2. 您要的方框外觀 --- */
  border: 1px solid #ced4da; /* 實線邊框 */
  /* border: 1px dotted #aaaaaa; */ /* (如果您想要圖片中的虛線) */
  border-radius: 0.375rem;   /* 圓角 */
  padding: 0.75rem 0.5rem;  /* 內部間距 */
  margin-right: 1rem;      /* 方框之間的距離 */
  
  color: #212529; /* 深灰色文字 */

  transition: border-color 0.2s ease; /* (動畫) */
}

/* 3. 方框 hover 效果 */
.radio-boxed:hover {
  border-color: #000; 
}

/* 4. [!!] 當 radio 被「選中」時，方框的樣式 [!!] */
/* (這會讓被選中的方框也反白，更清楚) */
.radio-boxed:has(input[type="radio"]:checked) {
  background-color: #343a40 !important; /* 深灰色背景 */
  border-color: #343a40 !important;     /* 邊框也變深 */
  
  /* 文字顏色變白 */
  color: #fff !important;    /* 白色文字 */
  
  /* (Bootstrap 5 的 "focus" 光暈效果，可選) */
  box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.1);
}

/* 5. radio 按鈕和文字(<span>)的間距 */
.radio-boxed input[type="radio"] {
  margin-right: 0.5rem;
}

.radio-boxed:has(input[type="radio"]:checked) input[type="radio"]:checked {
    filter: brightness(0) invert(1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* 5. 「小圓鈕」平時的樣式 (包含您要的邊框加深) */
.radio-boxed input[type="radio"] {
    margin-right: 0.5rem;
    width: 1.15em;
    height: 1.15em;
    border-color: #888; /* (可選) 加深「未選中」時的圓鈕邊框 */
}

/* * 這是 1-7 點量表專用的方框
 * 它是 ".radio-boxed" 的縮小/方形版
 */
.radio-boxed-likert {
  display: flex;  /* 讓 <span> 和 <input> (如果顯示的話) 排列 */
  align-items: center;   /* 垂直置中 */
  justify-content: center; /* 讓 1, 2, 3 水平置中 */
  cursor: pointer;

  flex: 1;

  padding: 0.5rem 0.25rem; /* (上下 0.5rem, 左右 0.25rem) */
  
  border: 1px solid #ced4da; /* 邊框 */
  border-radius: 0.375rem;   /* 圓角 */
  
  color: #212529; /* 深灰色文字 */
  font-size: 1.1rem;  /* 讓 1,2,3... 大一點 */
  font-weight: 500;
  
  transition: all 0.2s ease; /* 動畫 */
}

/* 2. Hover 效果 */
.radio-boxed-likert:hover {
  border-color: #000;
}

/* 3. [!!] 「選中」時的樣式 (和 Q1 邏輯一樣) [!!] */
.radio-boxed-likert:has(input[type="radio"]:checked) {
  background-color: #343a40 !important; /* 深灰色背景 */
  border-color: #343a40 !important;
  color: #fff !important; /* 白色文字 */
}

/* 4. [!!] 隱藏 radio 小圓鈕 [!!] */
/* (因為方框本身已經反白，小圓鈕很多餘) */
.radio-boxed-likert input[type="radio"] {
   display: none;
}

body.page-scrolling header.masthead {
  /* 1. 覆蓋掉 100vh，改成自動高度 */
  height: auto !important;
  
  /* 2. 還是要保留最小高度，以免頁面太短 */
  min-height: 100vh !important;
  
  /* 3. (可選) 您也可以在這裡微調 padding */
  padding-top: 2rem !important; 

  padding-bottom: 4rem !important;
}

/* 1. 這是複選方框 <label> 本身 (更新後) */
.checkbox-boxed {
  display: flex; /* [!] 改成 inline-flex (或 flex) */
  align-items: center;   /* 垂直置中 */
  justify-content: center;
  cursor: pointer;

  /* --- 2. 方框外觀 (改成 100% 寬) --- */
  width: 100%; /* [!!] 確保這是 100% [!!] */
  border: 1px solid #ced4da; 
  border-radius: 0.375rem;   /* 圓角 */
  padding: 0.75rem 0.5rem;  /* 內部間距 */

  color: #212529; /* 深灰色文字 */
  transition: all 0.2s ease; /* 動畫 */
  
  word-wrap: break-word;
}

.checkbox-boxed:hover {
  border-color: #000;
}
.checkbox-boxed:has(input[type="checkbox"]:checked) {
  background-color: #343a40 !important;
  border-color: #343a40 !important;
  color: #fff !important;
}

.checkbox-boxed input[type="checkbox"] {
    /* [!!] 關鍵修正：加入右間距 [!!] */
    margin-right: 0.5rem;  /* 1rem = 16px (您可以自行調整 0.75rem 或 1rem) */

    /* [!] (可選) 讓方框大一點，視覺上更和諧 */
    width: 1.15em;
    height: 1.15em;
    border-color: #888; /* (可選) 加深「未選中」時的圓鈕邊框 */
    /* [!] (修正) 確保方框在 flex 佈局中不會被壓縮 */
    flex-shrink: 0;
}

.checkbox-boxed:has(input[type="checkbox"]:checked) input[type="checkbox"]:checked {
    filter: brightness(0) invert(1);
    box-shadow: none;
}

/* 移除 input 的預設邊框和背景，只留底線 */
.form-control-underline {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #ced4da !important; /* 底線顏色 */
    border-radius: 0 !important; /* 移除圓角 */
    box-shadow: none !important; /* 移除陰影 */
}

/* 當 input 被點擊 (focus) 時，讓底線變色 (例如變藍色) */
.form-control-underline:focus {
    border-bottom-color: #0d6efd !important; 
}

/* 移除 "歲" 單位方框的背景和邊框 */
.form-control-underline-suffix {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #ced4da !important; /* 保持底線一致 */
    border-radius: 0 !important;
}

.question-item + .question-item {
    margin-top: 3.5rem; /* 2.5rem = 40px (您可以改成 3rem 或 4rem) */
}

.question-item2{
    margin-bottom: 1.5rem; /* 2.5rem = 40px (您可以改成 3rem 或 4rem) */
    font-size: large;
}

.likert-flex-container {
    display: flex; /* [!!] 啟動 Flexbox 佈局 [!!] */
    width: 100%; /* 撐滿整個白色問卷框 */

    /* (可選) 在方框之間加入一點點空隙 */
    gap: 0.25rem; /* (4px 的間距) */
}

body.page-scrolling header.masthead {
    /* [!] 覆蓋高度，讓它可以滾動 [!] */
    height: auto !important; 
    min-height: 100vh !important;

     background: linear-gradient(to bottom, rgba(237, 236, 228, 0.7) 0%, rgba(237, 236, 228, 0.7) 100%), url("../assets/img/bg.png");

    /* [!] 覆蓋 padding，移除手機版頂部的大空白 [!] */
    /* (如果您希望長頁面頂部空白小一點) */
    /* padding-top: 4rem !important; */
    /* padding-bottom: 4rem !important; */
}

body.page-scrolling_instruction header.masthead {
  /* 1. 覆蓋掉 100vh，改成自動高度 */
  height: auto !important;
  
  /* 2. 還是要保留最小高度，以免頁面太短 */
  min-height: 100vh !important;
  
  /* 3. (可選) 您也可以在這裡微調 padding */
  padding-top: 1rem !important; 

  padding-bottom: 4rem !important;

  background: linear-gradient(to bottom, rgba(237, 236, 228, 0.5) 0%, rgba(237, 236, 228, 0.5) 100%), url("../assets/img/bg.png");

}

.disabled-link {
    pointer-events: none; /* 關鍵！這行讓滑鼠點擊無效 */
    cursor: not-allowed;  /* 滑鼠移上去會變成禁止符號 */
    opacity: 0.6;         /* 變半透明，看起來像失效 */
    background-color: #6c757d !important; /* 變成灰色 (選用) */
    border-color: #6c757d !important;     /* 變成灰色 (選用) */
}