/* 產品頁把關 — 視覺照老闆原文規格(FEAT-003)
   主色 #2c3e50 / 藍 #3498db / 淺藍底 #e8f4f8 / 綠 #2ecc71 / 黃 #f1c40f / 紅 #e74c3c
   桌面 1440 寬、側欄固定 248px。風格:專業、乾淨、資訊密度中等,不作花巧修飾。 */

:root {
  --主: #2c3e50;
  --藍: #3498db;
  --淺藍: #e8f4f8;
  --綠: #2ecc71;
  --黃: #f1c40f;
  --紅: #e74c3c;
  --線: #e3e8ec;
  --灰字: #6b7a86;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'PingFang HK', 'PingFang TC', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  color: var(--主);
  background: #f7f9fa;
  line-height: 1.7;
}

.殼 { display: flex; min-height: 100vh; }

/* ── 側欄:固定 248px(規格寫死)── */
.側欄 {
  width: 248px;
  flex: 0 0 248px;
  background: var(--主);
  color: #fff;
  padding: 22px 18px;
  position: sticky;
  /* 影子帶讓位。呢版冇載 style.css,所以個變數喺度後備做 0px —— 
     即係生產環境同影子模式以外,行為同以前一模一樣。 */
  top: var(--影子帶高, 0px);
  height: calc(100vh - var(--影子帶高, 0px));
}
.牌 { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.返 { display: inline-block; margin: 14px 0 26px; color: #cfe0ec; text-decoration: none; font-size: 13px; }
.返:hover { color: #fff; text-decoration: underline; }

.步進 { display: flex; flex-direction: column; gap: 4px; }
.步 {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  font-size: 14px; color: #a9bccb;
}
.步.現 { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.步.完 { color: #bfe3cd; }
.圈 {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center; font-size: 12px;
}
.步.完 .圈 { background: var(--綠); border-color: var(--綠); color: #fff; }
.側註 { margin-top: 28px; font-size: 12px; color: #9db1c0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; }

/* ── 主區 ── */
.主 { flex: 1; padding: 30px 38px 60px; max-width: 1192px; }
h1 { font-size: 23px; margin: 0 0 22px; }
h2 { font-size: 16px; margin: 26px 0 10px; }

.閘提示 {
  background: #fdecea; border-left: 4px solid var(--紅);
  padding: 12px 16px; border-radius: 4px; margin-bottom: 20px;
}

/* 欄位 */
.欄 { display: block; margin-bottom: 22px; max-width: 420px; }
.欄名 { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.欄名 em { color: var(--紅); font-style: normal; font-size: 12px; margin-left: 6px; }
select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--線); border-radius: 6px; background: #fff; color: var(--主);
}
.欄註 { display: block; font-size: 12px; color: var(--灰字); margin-top: 5px; }

/* 拖放區 */
.放區 {
  border: 2px dashed #c5d3dd; border-radius: 10px; background: #fff;
  padding: 34px 20px; text-align: center; margin-bottom: 14px;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.放區:hover, .放區:focus-visible { border-color: var(--藍); background: #fbfdff; outline: none; }
.放區.拖緊 { border-color: var(--藍); background: var(--淺藍); }
.放區.細 { padding: 22px 20px; }
.放字 { font-size: 15px; font-weight: 600; }
.放細 { font-size: 12.5px; color: var(--灰字); margin: 6px 0 12px; }

.檔列 {
  background: #fff; border: 1px solid var(--線); border-radius: 8px;
  padding: 12px 15px; margin-bottom: 16px; font-size: 13.5px;
}
.檔列 b { font-weight: 600; }

.縮圖列 { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.縮圖 { width: 84px; text-align: center; font-size: 11px; color: var(--灰字); }
.縮圖 img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--線); display: block; }
.縮圖.壞 img, .縮圖.壞 .框 { border: 2px solid var(--紅); }
.縮圖 .框 { width: 84px; height: 84px; border-radius: 6px; display: grid; place-items: center; background: #fbeceb; font-size: 11px; }
.縮圖 .主標 { color: var(--綠); font-weight: 700; }

/* 三色列 */
.三色列 { list-style: none; padding: 0; margin: 0; }
.三色列 li {
  background: #fff; border: 1px solid var(--線); border-left-width: 4px;
  border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px;
}
.三色列 li.綠 { border-left-color: var(--綠); }
.三色列 li.黃 { border-left-color: var(--黃); }
.三色列 li.紅 { border-left-color: var(--紅); }

/* 橫額 */
.橫額 { background: var(--淺藍); border-radius: 8px; padding: 16px 20px; margin-bottom: 22px; }
.橫額主 { font-size: 16px; font-weight: 700; }
.橫額副 { font-size: 13px; color: #4a6274; margin-top: 4px; }
.橫額註 { font-size: 12.5px; color: #4a6274; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(44,62,80,.12); line-height: 1.6; }

/* 檢查項 */
.項列 { display: flex; flex-direction: column; gap: 9px; }
.項 { background: #fff; border: 1px solid var(--線); border-radius: 8px; overflow: hidden; }
.項頭 {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px;
  cursor: pointer; user-select: none;
}
.點 { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.點.通過 { background: var(--綠); }
.點.必須修正 { background: var(--紅); }
.點.建議修正, .點.建議補充 { background: var(--黃); }
.點.不適用 { background: #c3ccd3; }
.項名 { flex: 1; font-size: 14.5px; font-weight: 600; }
.項籤 { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: #eef2f5; color: var(--灰字); }
.項籤.必須修正 { background: #fdecea; color: #a33027; }
.項籤.建議修正, .項籤.建議補充 { background: #fef7e0; color: #8a6d1b; }
.項籤.通過 { background: #eaf7f0; color: #1e7a4a; }
.項身 { padding: 0 15px 14px 36px; font-size: 13.5px; color: #445; }
.項身 .條款 { font-size: 12px; color: var(--灰字); margin-bottom: 6px; }
.項身 pre { background: #f6f8f9; padding: 10px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; overflow-x: auto; }
.項作 { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
/* 撳完要睇得出撳咗 —— 一條幼藍框等於冇反應(老闆 2026-08-30 實試report) */
.掣.揀咗 { background: var(--藍); color: #fff; border-color: var(--藍); }
.決定標 { font-size: 12.5px; color: var(--藍); font-weight: 600; margin-left: 4px; }

.未驗 { margin-top: 26px; background: #fff; border: 1px solid var(--線); border-radius: 8px; padding: 12px 16px; }
.未驗 summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.未驗 ul { font-size: 13px; color: #445; }
.未驗註 { font-size: 12.5px; color: var(--灰字); margin-bottom: 0; }

/* 預覽 */
.預覽格 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.預覽框 { width: 100%; height: 620px; border: 1px solid var(--線); border-radius: 8px; background: #fff; }
.預覽右 { background: #fff; border: 1px solid var(--線); border-radius: 8px; padding: 16px 18px; align-self: start; }
.預覽右 h2 { margin-top: 0; }
.摘要行 { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; border-bottom: 1px dashed var(--線); }
.聲明 {
  margin-top: 16px; font-size: 12.5px; line-height: 1.65;
  background: #fef7e0; border-left: 4px solid var(--黃); padding: 10px 12px; border-radius: 4px;
}

/* 掣 */
.底掣 { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.決定數 { flex: 1; font-size: 13px; color: var(--灰字); }
.掣 {
  font: inherit; font-size: 14px; padding: 9px 18px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer;
}
.掣.主 { background: var(--藍); color: #fff; }
.掣.主:hover:not(:disabled) { background: #2c86c4; }
.掣.主.綠 { background: var(--綠); }
.掣.主.綠:hover:not(:disabled) { background: #27b463; }
.掣.次 { background: #fff; border-color: #c5d3dd; color: var(--主); }
.掣.次:hover { border-color: var(--藍); color: var(--藍); }
.掣.文 { background: none; color: var(--灰字); text-decoration: underline; padding: 9px 6px; }
.掣:disabled { opacity: .45; cursor: not-allowed; }

.附註 { font-size: 12.5px; color: var(--灰字); margin-top: 12px; }

@media (max-width: 1100px) {
  .預覽格 { grid-template-columns: 1fr; }
  .側欄 { width: 200px; flex-basis: 200px; }
}