/* IEP 檢核網頁:排版層。形狀一律用設計系統的手繪素材(app_skin.css 已處理按鈕、分區筆刷、警告底),
   這裡只管排版與文字;不用 border / border-radius / box-shadow / 漸層(一起學設計系統 README)。
   這頁的 CSP 不准 HTML 內嵌 style,所有樣式都在這個檔。 */
[hidden] { display: none !important; }
body { margin: 0; font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }  /* 電腦內建字型,不載網路字型 */
header.site { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
header.site a { text-decoration: none; color: #3a3a40; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand span { font-size: 22px; font-weight: 900; letter-spacing: 0.04em; }
header.site nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 17px; font-weight: 500; }

main.panel { max-width: 860px; margin: 0 auto; line-height: 1.75; }
/* 麵包屑、頁尾:照其他工具頁(國字注音出卷)同一套,讓老師回得去首頁和全部工具 */
.crumbs { margin: 16px 0 8px; font-size: 15px; color: #6b6457; }
.crumbs span[aria-hidden] { margin: 0 8px; }
.crumb { color: #0e6b79; text-decoration: none; padding-bottom: 6px; background: url(/assets/brush_stroke_2.webp) center bottom / 100% 8px no-repeat; }
footer.site { max-width: 1200px; margin: 24px auto 0; padding: 0 24px 40px; }
footer.site .divider { display: block; width: 100%; height: 32px; }
footer.site .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 15px; color: #6b6457; margin-top: 16px; }
footer.site .foot a { font-weight: 700; color: #3a3a40; text-decoration: none; }
h1 { margin: 8px 0 4px; }
h2 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }

.privacy { margin: 22px 0 10px; padding: 22px 26px 18px; background: url(/assets/card_wash.webp) center / 100% 100% no-repeat; }
.privacy ul { margin: 0; padding-left: 1.2em; }
.privacy li + li { margin-top: 6px; }

/* 選檔:原生的檔案欄位藏起來(鍵盤與讀屏照樣能用),外面墊主要按鈕的手繪底 */
.pick { display: inline-block; position: relative; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 56px; padding: 8px 34px; font-size: 18px; font-weight: 700;
  background: url(/assets/swash_button.webp) center / 100% 100% no-repeat; }
.pick input:focus-visible + span { background: url(/assets/swash_button.webp) center top / 100% calc(100% - 8px) no-repeat,
  url(/assets/brush_stroke.webp) center bottom / 100% 8px no-repeat; }

/* 報告看完的下一步(U6,11-10):換一份檢查=再開一次選檔;同主要按鈕的手繪底 */
#again { margin: 0 0 24px; }
.again { border: 0; margin: 0; min-height: 56px; padding: 8px 34px; font: inherit; font-size: 18px; font-weight: 700; color: #3a3a40; cursor: pointer;
  background: url(/assets/swash_button.webp) center / 100% 100% no-repeat; }
.again:focus-visible { outline: none; background: url(/assets/swash_button.webp) center top / 100% calc(100% - 8px) no-repeat,
  url(/assets/brush_stroke.webp) center bottom / 100% 8px no-repeat; }

#msgs .msg { margin: 14px 0; }
#report { margin: 10px 0 24px; outline: none; }
.summary { font-size: 20px; font-weight: 900; margin: 18px 0 8px; }
.block { padding: 22px 0 8px; background: url(/assets/brush_stroke.webp) center top / 100% 12px no-repeat; }
.items { list-style: none; margin: 0; padding: 0; }
.item { padding: 12px 0 10px; }
.item + .item { background: url(/assets/brush_stroke_2.webp) left top / 40% 6px no-repeat; }
.item p { margin: 0; }
.item-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.lv { font-weight: 900; }
.lv-FAIL .lv { color: #b3261e; }
.lv-PASS .lv, .lv-NA .lv, .lv-INFO .lv { color: #6b6457; }
.title { font-weight: 700; font-size: 17px; }
.fix { margin-top: 2px; }
.what, .ev { color: #6b6457; font-size: 15px; overflow-wrap: anywhere; }
.snips { margin: 6px 0 0; padding-left: 1.6em; color: #3a3a40; font-size: 15px; overflow-wrap: anywhere; }
.snips .more { list-style: none; color: #6b6457; }
details.passed { margin-top: 8px; }
details.passed summary { cursor: pointer; color: #6b6457; }

@media (max-width: 600px) {
  header.site { padding: 14px 16px; }
  main.panel { padding: 16px 16px 40px; }
  .privacy { padding: 18px 18px 14px; }
}