@charset "UTF-8";
/* EMI品保 - 前台檔案上傳 / SSO 登入表單
   版面沿用 master.css 的 formBox / formColumn，
   欄位寬度比照 contact.css 的做法，於各欄位語意 class 上指定。 */

/* ===== 欄位寬度 ===== */
.formList .loginNote,
.formList .uploadNote,
.formList .errorArea,
.formList .loginUser,
.formList .fileSelect {
  width: 100%;
}

.formList .account,
.formList .password {
  width: 50%;
}
@media (max-width: 767px) {
  .formList .account,
  .formList .password {
    width: 100%;
  }
}

/* 送出按鈕比照 contact：寬度由 .btn 的 min-width 決定，不撐滿整列 */
.formList .btnBox {
  align-items: center;
  display: flex;
  gap: 10px;
  width: auto;
}

/* 錯誤訊息未顯示時不佔用垂直空間 */
.formList .errorArea {
  padding-top: 0;
  padding-bottom: 0;
}
.formList .errorArea:has(> .errorText[style*="display:none"]) {
  padding: 0;
}

.errorText {
  color: #d0021b;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
}

/* ===== 上傳區 ===== */
.uploadArea {
  margin-top: 60px;
}
@media (max-width: 767px) {
  .uploadArea {
    margin-top: 40px;
  }
}

.uploadArea > .titleBox {
  margin-bottom: 10px;
}

/* 區塊小標題靠左，不沿用頁面主標題的置中。
   master.css 以 body:not(#WebSiteHome) .titleBox .title 置中，
   此處需相同權重才蓋得過 */
body:not(#WebSiteHome) .uploadArea > .titleBox .title {
  text-align: left;
  width: 100%;
}

.uploadArea > .titleBox .title {
  font-size: 22px;
  font-weight: bold;
}
@media (max-width: 767px) {
  .uploadArea > .titleBox .title {
    font-size: 20px;
  }
}

/* 登入者資訊 */
.formList .loginUser {
  gap: 8px;
}

/* 標題與值同列顯示：columnTitle 預設為整列寬，此處改為依內容 */
.formList .loginUser .columnTitle {
  margin: 0;
  width: auto;
}

.formList .loginUser .text {
  margin: 0;
}

.formList .loginUser .btn.logout {
  font-size: 14px;
  margin-left: auto;
  min-width: 90px;
  padding: 4px 12px;
}
@media (max-width: 767px) {
  .formList .loginUser .btn.logout {
    margin-left: 0;
  }
}

/* 檔案格式說明 */
.formList .fileSelect .text.note {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
  width: 100%;
}

/* =========================================================
   分區上傳版型（公版四區塊 / 系所三區塊）
   由該筆資料的 data_upload_open 決定是否套用。
   表單本身沿用上方通用上傳的 formList 欄位樣式，
   此處僅補區塊、清單與登入列；檔案清單比照 download.css 的 flex 假表格。
   ========================================================= */

.qaFileList .qaFileItem,
.qaFileList .qaFileItem .item .Txt,
.loginBar .btn.logout {
  transition: all 0.5s ease-in-out;
}

/* ===== 區塊 ===== */
.qaSection {
  margin-top: 60px;
}
@media (max-width: 767px) {
  .qaSection {
    margin-top: 40px;
  }
}

.qaSection > .titleBox {
  margin-bottom: 20px;
}

/* 區塊小標題靠左，不沿用頁面主標題的置中。
   master.css 以 body:not(#WebSiteHome) .titleBox .title 置中，
   此處需相同權重才蓋得過 */
body:not(#WebSiteHome) .qaSection > .titleBox .title {
  text-align: left;
  width: 100%;
}

.qaSection > .titleBox .title {
  border-left: 4px solid #75C8CF;
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  padding-left: 12px;
}
@media (max-width: 767px) {
  .qaSection > .titleBox .title {
    font-size: 19px;
  }
}

/* ===== 登入者資訊列 ===== */
.loginBar {
  align-items: center;
  background-color: #f7f7f7;
  border: 1px solid #e6e6e6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 20px;
}
@media (max-width: 767px) {
  .loginBar {
    padding: 12px 15px;
  }
}

.loginBar .userInfo {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(14px, 0.8vw, 16px);
  gap: 10px;
}

.loginBar .userInfo .label {
  color: #737373;
  font-size: 14px;
}

.loginBar .userInfo .name {
  color: #202020;
  font-weight: 700;
}

.loginBar .userInfo .dpt {
  border-left: 1px solid #cecece;
  color: #666;
  font-size: 14px;
  padding-left: 10px;
}
@media (max-width: 480px) {
  .loginBar .userInfo .dpt {
    border-left: 0;
    padding-left: 0;
    width: 100%;
  }
}

.loginBar .btn.logout {
  border: 1px solid #cecece;
  color: #202020;
  font-size: 14px;
  line-height: 1.6;
  padding: 5px 18px;
  text-align: center;
}
@media (min-width: 1024px) {
  .loginBar .btn.logout:hover {
    background-color: #202020;
    border-color: #202020;
    color: #fff;
  }
}

/* ===== 區塊說明框 =====
   限直接子層，避免誤中上傳表單內的「可上傳格式」說明（.text.note），
   那段沿用通用上傳的小灰字樣式，不該有底色 */
.qaSection > .note {
  background-color: #f1f1f1;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px;
  white-space: pre-line;
}

/* 未開放上傳時說明框為區塊唯一內容，不需下方間距 */
.qaSection > .note.closed {
  color: #737373;
  margin-bottom: 0;
}

/* ===== 我上傳的檔案 ===== */
.myUploads {
  margin-top: 40px;
}
@media (max-width: 767px) {
  .myUploads {
    margin-top: 30px;
  }
}

.myUploads .sectionTitle {
  border-bottom: 1px solid #d6d6d6;
  color: #232323;
  font-size: clamp(16px, 0.9375vw, 18px);
  font-weight: 500;
  margin-bottom: 20px;
  padding: 15px 0;
}

/* ===== 檔案清單（比照 download.css 的假表格） ===== */
.qaFileList .qaFileItem {
  border-bottom: 1px solid #ccc;
}

.qaFileList .qaFileItem.header {
  border-bottom: 1px solid #202020;
  color: #202020;
  font-weight: 500;
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem.header {
    display: none;
  }
}

@media (min-width: 1024px) {
  .qaFileList .qaFileItem.content:hover .Txt {
    color: #3284C7;
  }
}

.qaFileList .qaFileItem .item {
  font-size: clamp(16px, 0.9375vw, 18px);
  position: relative;
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem .item {
    font-size: clamp(14px, 0.8vw, 16px);
  }
}

.qaFileList .qaFileItem .item .linkWrap {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.qaFileList .qaFileItem .item .Txt {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem .item .Txt {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 33px 12px 0;
  }
}

.qaFileList .qaFileItem .item .title {
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5;
  width: calc(100% - 400px);
  word-break: break-all;
}
@media (max-width: 1023px) {
  .qaFileList .qaFileItem .item .title {
    width: calc(100% - 320px);
  }
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem .item .title {
    width: 100%;
  }
}

.qaFileList .qaFileItem .item .textBox {
  padding: 0 20px;
  width: 300px;
}
@media (max-width: 1023px) {
  .qaFileList .qaFileItem .item .textBox {
    padding: 0 15px;
    width: 240px;
  }
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem .item .textBox {
    padding: 8px 0 0;
    width: 100%;
  }
}

.qaFileList .qaFileItem .item .textBox .text {
  align-items: center;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px 12px;
  line-height: 1.5;
  margin: 0;
}

/* 大小與時間不斷行，避免窄欄時被拆成兩列 */
.qaFileList .qaFileItem .item .textBox .fileSize,
.qaFileList .qaFileItem .item .textBox .fileDate {
  white-space: nowrap;
}

.qaFileList .qaFileItem .item .textBox .fileType {
  background-color: #f1f1f1;
  color: #202020;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 8px;
}

.qaFileList .qaFileItem .item .download {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100px;
}
@media (max-width: 1023px) {
  .qaFileList .qaFileItem .item .download {
    width: 80px;
  }
}
@media (max-width: 767px) {
  .qaFileList .qaFileItem .item .download {
    position: absolute;
    right: 0;
    top: 12px;
    width: auto;
    z-index: 1;
  }
}

.qaFileList .qaFileItem.content .item .download .bi {
  font-size: 20px;
}

/* ===== 無資料 ===== */
.emptyText {
  color: #999;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 20px 0;
}