/* ================= 佈局與模組作用域 (#qa_boox) ================= */
#qa_boox { padding: 50px 20px; width: 100%; display: flex; justify-content: center; min-height: 100vh; }
#qa_boox .workframe {width: 100%;max-width: 1024px;background: #ffffff;border-radius: 20px;box-shadow: 0 10px 40px rgba(0,107,179,0.08);padding: 50px;border: 1px solid rgba(0,0,0,0.03);}
#qa_boox article { margin-bottom: 30px; font-size: 16px; color: #5a6c7d; line-height: 1.6; }
#qa_boox fieldset { border: none; padding: 0; margin: 0; }
/* ================= 題目區塊共用設定 ================= */
#qa_boox .list { margin-bottom: 35px; }
#qa_boox .question p { font-size: 17px; font-weight: 700; color: #1a2b3c; margin-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; line-height: 1.5; }
#qa_boox .list p strong { font-size: 12px; color: #e53e3e; background: #fff5f5; padding: 4px 10px; border-radius: 6px; border: 1px solid #feb2b2; font-weight: 600; letter-spacing: 0.5px; }
/* ================= 選擇題 (Radio/Checkbox) 美化 ================= */
#qa_boox .question ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
#qa_boox .question li { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; background: #fcfdfd; border: 1px solid #e2e8f0; border-radius: 10px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
#qa_boox .question li:hover { border-color: #bbd6ee; background: #f0f7ff; transform: translateX(2px); }
#qa_boox .question input[type="radio"],#qa_boox .question input[type="checkbox"] { width: 20px; height: 20px; accent-color: #006bb3; cursor: pointer; margin: 0; flex-shrink: 0; }
#qa_boox .question label { font-size: 15px; color: #4a5568; cursor: pointer; font-weight: 500; flex-grow: 1; user-select: none; transition: color 0.3s; }
#qa_boox .question li:hover label { color: #006bb3; }
/* 選項內的補充說明文字輸入框 */
#qa_boox .question li input[type="text"] { flex-basis: 100%; margin-top: 8px; width: 100%; border: 1px solid #cbd5e0; padding: 10px 14px; border-radius: 6px; font-size: 14px; outline: none; transition: all 0.3s; background: #ffffff; color: #1a2b3c; }
#qa_boox .question li input[type="text"]:focus { border-color: #006bb3; box-shadow: 0 0 0 3px rgba(0,107,179,0.15); }
/* ================= 文字題 (Textarea) ================= */
#qa_boox textarea { width: 100%; min-height: 140px; padding: 16px; border: 1px solid #cbd5e0; border-radius: 10px; font-size: 15px; color: #1a2b3c; outline: none; transition: all 0.3s; resize: vertical; background: #fcfcfc; line-height: 1.6; }
#qa_boox textarea:focus { border-color: #006bb3; box-shadow: 0 0 0 3px rgba(0,107,179,0.15); background: #ffffff; }
/* ================= 使用者資料區塊 ================= */
#qa_boox .title .h3 { font-size: 22px; color: #1a2b3c; border-bottom: 2px solid #f0f4f8; padding-bottom: 15px; margin: 50px 0 25px 0; font-weight: 700; position: relative; }
#qa_boox .title .h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 60px; height: 2px; background: #006bb3; }
/* 姓名、公司、Email 等一般輸入框 */
#qa_boox .list:not(.question):not(.title):not(.last) p { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; margin-top: 0; }
#qa_boox .list:not(.question):not(.title):not(.last) label { font-size: 15px; font-weight: 600; color: #4a5568; display: flex; align-items: center; gap: 10px; }
#qa_boox .list:not(.question):not(.title):not(.last) input[type="text"] { width: 100%; padding: 14px 16px; border: 1px solid #cbd5e0; border-radius: 8px; font-size: 15px; outline: none; transition: all 0.3s; background: #fcfcfc; color: #1a2b3c; }
#qa_boox .list:not(.question):not(.title):not(.last) input[type="text"]:focus { border-color: #006bb3; box-shadow: 0 0 0 3px rgba(0,107,179,0.15); background: #ffffff; }
/* 驗證碼專屬佈局 */
#qa_boox .code p { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 15px !important; }
#qa_boox .code label { margin-bottom: 0 !important; }
#qa_boox .code input { width: 160px !important; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; text-align: center; }
#qa_boox .code img {border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.08);height: 35px;object-fit: contain;background: #fff;padding: 4px;border: 1px solid #e2e8f0;transition: transform 0.2s;}
#qa_boox .code img:hover { transform: scale(1.05); }
/* ================= 送出區塊 ================= */
#qa_boox .list:nth-last-child(2) { text-align: center; font-size: 18px; font-weight: 600; color: #006bb3; margin-top: 40px; margin-bottom: 20px; }
#qa_boox .send { display: flex; justify-content: center; }
#qa_boox .btn-submit { background: #006bb3; color: white; border: none; padding: 16px 50px; font-size: 18px; font-weight: 700; border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.165,0.84,0.44,1); box-shadow: 0 6px 20px rgba(0,107,179,0.3); width: 100%; max-width: 350px; letter-spacing: 1px; }
#qa_boox .btn-submit:hover { background: #005599; transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,107,179,0.4); }
#qa_boox .btn-submit:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(0,107,179,0.2); }
/* ================= 響應式設計 (RWD) ================= */
@media (min-width:769px) {
  #qa_boox .question li input[type="text"] { flex-basis: auto; flex-grow: 1; margin-top: 0; }
}
@media (max-width:768px) {
  #qa_boox { padding: 20px 15px; }
  #qa_boox .workframe { padding: 30px 20px; border-radius: 16px; }
  #qa_boox .question p { font-size: 16px; }
  #qa_boox .title .h3 { font-size: 18px; margin-top: 30px; }
  #qa_boox .btn-submit { max-width: 100%; }
  #qa_boox .code input { flex: 1; min-width: 120px; }
  #qa_boox .question li { padding: 10px 12px; }
}