/* 一起學工具站:出卷網頁的手繪外觀層(2026-11-08)
   只在網站上的複製品生效(site/build.py 注入);出卷網頁原檔 ~/OS/sped/exam/國字注音出卷系統/web/ 不動。
   規則照「一起學 特教設計系統」README:形狀一律用 MJ 手繪素材,CSS 只管排版與文字;
   不用 border / border-radius / box-shadow / 漸層 / 透明度 / 濾鏡。
   整份包在 @media screen:列印內容(卷面)完全不受影響。
   唯一例外是檔尾的 @media print:把 build.py 插進來的細頁首藏起來(2026-11-10)。 */
@media screen {
  /* 細頁首(build.py 的 APP_HEADER):同 IEP 檢核頁 iep.css 那條 */
  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; }
  header.site .brand { display: flex; align-items: center; gap: 12px; }
  header.site .brand img { width: 52px; height: 52px; object-fit: contain; }
  header.site .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; }
  @media (max-width: 600px) { header.site { padding: 14px 16px; } }

  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: transparent; --panel: transparent; --ink: #3a3a40; --muted: #6b6457; --line: transparent;
    --accent: transparent; --accent-ink: #3a3a40; --warn-bg: transparent; --warn-ink: #3a3a40;
  }
  body {
    background: #fbf7ef url(/assets/paper_tile.jpg) repeat; background-size: 1024px;
    color: #3a3a40; font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-size: 16px;
  }
  .panel { background: none; border: 0; padding: 22px 24px 48px; }
  h1 { font-size: 24px; font-weight: 900; }
  .sub, .hint { color: #6b6457; }
  a { color: #0e6b79; }

  /* 分區:不畫框,區塊之間墊筆刷 */
  fieldset { border: 0; border-radius: 0; margin: 0; padding: 22px 0 16px;
    background: url(/assets/brush_stroke.webp) center top / 100% 12px no-repeat; }
  legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 17px; font-weight: 700; }
  legend + * { clear: both; }

  /* 欄位:field_wash 墊在字後面;下拉選單右邊的箭頭是瀏覽器原生的字元 */
  input[type=number], input[type=text], select {
    border: 0; border-radius: 0; min-height: 42px; padding: 8px 14px;
    background: url(/assets/field_wash.webp) center / 100% 100% no-repeat;
    color: #3a3a40; font-weight: 500;
  }
  input::placeholder { color: #5a5a60; }

  /* 勾選框、單選鈕:依狀態換圖;原生外觀隱藏,鍵盤操作保留 */
  input[type=checkbox], input[type=radio] {
    -webkit-appearance: none; appearance: none; flex: none; margin: 2px 0 0; width: 24px; height: 24px; cursor: pointer;
    background: url(/assets/check_off.webp) center / 20px 20px no-repeat;
  }
  input[type=checkbox]:checked { background-image: url(/assets/check_on.webp); background-size: 24px 24px; }
  input[type=radio] { background-image: url(/assets/radio_off.webp); background-size: 22px 22px; }
  input[type=radio]:checked { background-image: url(/assets/radio_on.webp); background-size: 22px 22px; }

  /* 按鈕:swash_tag;主要動作 swash_button(字一律 ink) */
  button {
    border: 0; border-radius: 0; min-height: 42px; padding: 8px 20px;
    background: url(/assets/swash_tag.webp) center / 100% 100% no-repeat;
    color: #3a3a40; font-weight: 700;
  }
  button.primary { min-height: 56px; font-size: 18px; background-image: url(/assets/swash_button.webp); color: #3a3a40; }

  /* 鍵盤焦點:不用 outline,底下墊粗筆刷(DS:焦點=brush_stroke) */
  input:focus-visible, select:focus-visible, button:focus-visible { outline: none; }
  input[type=number]:focus-visible, input[type=text]:focus-visible, select:focus-visible {
    background: url(/assets/field_wash.webp) center top / 100% calc(100% - 8px) no-repeat,
                url(/assets/brush_stroke.webp) center bottom / 100% 8px no-repeat;
  }
  button:focus-visible {
    background: url(/assets/swash_tag.webp) center top / 100% calc(100% - 8px) no-repeat,
                url(/assets/brush_stroke.webp) center bottom / 100% 8px no-repeat;
  }
  button.primary:focus-visible {
    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;
  }
  input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { height: 32px;
    background-position: center top, center bottom; background-repeat: no-repeat;
    background-size: 20px 20px, 100% 6px; }
  input[type=checkbox]:focus-visible { background-image: url(/assets/check_off.webp), url(/assets/brush_stroke.webp); }
  input[type=checkbox]:checked:focus-visible { background-image: url(/assets/check_on.webp), url(/assets/brush_stroke.webp); background-size: 24px 24px, 100% 6px; }
  input[type=radio]:focus-visible { background-image: url(/assets/radio_off.webp), url(/assets/brush_stroke.webp); background-size: 22px 22px, 100% 6px; }
  input[type=radio]:checked:focus-visible { background-image: url(/assets/radio_on.webp), url(/assets/brush_stroke.webp); background-size: 22px 22px, 100% 6px; }

  /* 訊息:警告墊 card_wash;一般訊息只是小字,不畫虛線框 */
  .msg { border: 0; border-radius: 0; }
  .msg.warn { padding: 14px 18px; background: url(/assets/card_wash.webp) center / 100% 100% no-repeat; color: #3a3a40; }
  .msg.ok { padding: 4px 0; background: none; color: #6b6457; }

  /* 預覽:分頁鈕=純文字,選中墊細筆刷;卷子不加陰影 */
  .main { padding: 22px 24px; }
  .tabs button { background: none; color: #6b6457; font-weight: 400; padding: 8px 14px; }
  .tabs button[aria-pressed=true] { color: #3a3a40; font-weight: 700;
    background: url(/assets/brush_stroke_2.webp) center bottom / 80% 10px no-repeat; }
  .tabs button:focus-visible { background: url(/assets/brush_stroke.webp) center bottom / 100% 8px no-repeat; }
  .sheet { box-shadow: none; }

  /* 出處表:不畫格線,靠留白分欄 */

  @media (max-width: 860px) {
    .panel { border: 0; }
    .main { padding: 12px 16px; }
  }
}

@media print {
  header.site { display: none !important; }
}