/* 兩打半互動 · 資訊安全管理規範
   品牌色：黑 #000000 / 珊瑚橘 #E96A4C / 深藍 #16324E / 鋼藍 #5F94AD
   淺色以深藍為主色、珊瑚橘為警示；深色改用鋼藍作主色（深藍在暗底上對比不足）。 */
:root{
  --brand-navy:#16324e; --brand-coral:#e96a4c; --brand-steel:#5f94ad;

  --ground:#edf0f3; --surface:#fff; --surface-2:#f5f7f9; --surface-3:#e4e9ee;
  --ink:#0f2130; --ink-2:#33485a; --muted:#63788a;
  --line:#d3dbe3; --line-2:#e5ebf0;
  --accent:var(--brand-navy); --accent-soft:#e1e9f1; --on-accent:#fff;
  --crit:#b6462c; --crit-soft:#fae7e0;
  --shadow:0 1px 2px rgba(15,33,48,.04),0 6px 18px rgba(15,33,48,.06);
  --shadow-sm:0 1px 2px rgba(15,33,48,.06);
  --logo-filter:none;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0a1018; --surface:#131c27; --surface-2:#1a2430; --surface-3:#243040;
  --ink:#edf2f6; --ink-2:#c3cfda; --muted:#8898a8;
  --line:#293544; --line-2:#1f2934;
  --accent:#79a8c2; --accent-soft:#16232f; --on-accent:#0a1018;
  --crit:#ef8b70; --crit-soft:#2d1a14;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.32);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --logo-filter:invert(1);
}}
:root[data-theme="dark"]{
  --ground:#0a1018; --surface:#131c27; --surface-2:#1a2430; --surface-3:#243040;
  --ink:#edf2f6; --ink-2:#c3cfda; --muted:#8898a8;
  --line:#293544; --line-2:#1f2934;
  --accent:#79a8c2; --accent-soft:#16232f; --on-accent:#0a1018;
  --crit:#ef8b70; --crit-soft:#2d1a14;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.32);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --logo-filter:invert(1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

body{margin:0;background:var(--ground);color:var(--ink);font-size:16.5px;line-height:1.85;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 font-family:"IBM Plex Sans","IBM Plex Sans TC",-apple-system,"PingFang TC","Noto Sans TC",sans-serif}
code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;background:var(--surface-2);
 padding:1.5px 6px;border-radius:5px;border:1px solid var(--line-2)}
a{color:var(--accent)}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand-coral);z-index:50;
 transition:width .1s linear}

/* ── 頁首 ─────────────────────────────────────────────────────────── */
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.mw{max-width:1130px;margin:0 auto;padding:0 32px}
.masthead .mw{padding-top:40px;padding-bottom:26px}
.brand{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo{width:92px;height:auto;flex:none;filter:var(--logo-filter)}
h1{margin:0;font-size:clamp(28px,3.6vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.2;
 text-wrap:balance;color:var(--ink);padding-left:22px;border-left:1px solid var(--line)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:22px;font-size:13px;color:var(--muted)}
.meta div{display:flex;gap:8px;align-items:baseline}
.meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.whoami{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
 border-radius:99px;padding:5px 14px 5px 5px}
.whoami.anon{background:var(--crit-soft);border-color:transparent}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none;
 display:grid;place-items:center;font-size:12px;font-weight:600;text-transform:uppercase;line-height:1}
.whoami.anon .avatar{background:var(--crit)}
.who-text{display:flex;align-items:baseline;gap:9px;min-width:0}
.who-text b{color:var(--ink);font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis;max-width:40ch}
.whoami.anon .who-text b{color:var(--crit)}
.logout{font-size:12px;color:var(--muted);text-decoration:none;flex:none;border-bottom:1px solid transparent}
.logout:hover{color:var(--ink);border-bottom-color:var(--line)}
.logout:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.pdfbtn{font:inherit;font-size:13px;font-weight:500;cursor:pointer;
 background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);border-radius:8px;
 padding:7px 16px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.pdfbtn::before{content:"↓";font-weight:700;color:var(--accent)}
.pdfbtn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.pdfbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 版面 ─────────────────────────────────────────────────────────── */
.layout{max-width:1130px;margin:0 auto;padding:0 32px 120px;
 display:grid;grid-template-columns:208px minmax(0,748px);gap:64px;align-items:start;justify-content:center}
nav.toc{position:sticky;top:28px;padding-top:44px}
nav.toc p{margin:0 0 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
nav.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:s}
nav.toc a{display:flex;gap:11px;text-decoration:none;color:var(--muted);font-size:13.5px;padding:6px 11px;
 border-radius:7px;line-height:1.5;transition:.14s;border-left:2px solid transparent}
nav.toc a::before{counter-increment:s;content:counter(s);color:var(--muted);opacity:.65;
 font-variant-numeric:tabular-nums;min-width:15px;font-family:"IBM Plex Mono",monospace;font-size:11.5px}
nav.toc a:hover{background:var(--surface-2);color:var(--ink)}
nav.toc a.active{background:var(--accent-soft);color:var(--accent);font-weight:600;border-left-color:var(--brand-coral)}
nav.toc a.active::before{color:var(--accent);opacity:1}
nav.toc a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

main{padding-top:44px;min-width:0}
section{scroll-margin-top:26px}
section+section{margin-top:52px;padding-top:48px;border-top:1px solid var(--line)}

h2{margin:0 0 4px;font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.3;
 display:flex;align-items:baseline;gap:14px;text-wrap:balance;color:var(--ink)}
h2 .n{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;color:var(--on-accent);
 background:var(--accent);border-radius:6px;padding:3px 9px;flex:none;line-height:1.35;letter-spacing:0}
h3{margin:32px 0 10px;font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.45}
h3 .n{font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--accent);font-weight:500;margin-right:10px}

p{margin:0 0 14px;color:var(--ink-2)}
main ul{margin:0 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
main ul>li{color:var(--ink-2);padding-left:22px;position:relative}
main ul>li::before{content:"";position:absolute;left:5px;top:.72em;width:5px;height:5px;border-radius:50%;
 background:var(--brand-coral)}
li b,p b{color:var(--ink);font-weight:600}

.tw{overflow-x:auto;margin:18px 0 22px;border:1px solid var(--line);border-radius:11px;
 background:var(--surface);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:440px}
th{text-align:left;background:var(--surface-3);color:var(--ink-2);font-weight:600;font-size:11.5px;
 letter-spacing:.09em;text-transform:uppercase;padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top;line-height:1.7}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}

.flow{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:20px 24px;
 margin:18px 0 22px;box-shadow:var(--shadow-sm)}
.flow ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px;color:var(--ink-2)}
.flow .lv{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:5px;margin-right:9px}
.lv-h{background:var(--crit-soft);color:var(--crit)}
.lv-m{background:var(--accent-soft);color:var(--accent)}
.lv-l{background:var(--surface-3);color:var(--muted)}
.note{border-left:3px solid var(--brand-coral);background:var(--accent-soft);padding:14px 20px;
 border-radius:0 9px 9px 0;margin:18px 0 22px}
.note p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ── 知悉確認 ─────────────────────────────────────────────────────── */
.ack{margin-top:52px;padding-top:48px;border-top:1px solid var(--line)}
.ackbox{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:28px 30px;box-shadow:var(--shadow)}
.ackbox h2{font-size:20px;margin-bottom:10px}
.ackbox p{font-size:15px}
.ackbtn{font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;margin-top:20px;
 background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:10px;
 padding:12px 28px;transition:.15s}
.ackbtn:hover:not(:disabled){filter:brightness(1.12)}
.ackbtn:disabled{cursor:default;opacity:.5}
.ackbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ackdone{margin-top:20px;display:flex;align-items:center;gap:13px;background:var(--accent-soft);
 border-left:3px solid var(--brand-coral);border-radius:0 10px 10px 0;padding:15px 20px}
.ackdone .tick{font-size:18px;color:var(--brand-coral);font-weight:700}
.ackdone div{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.ackdone b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ackwho{margin-top:16px;font-size:13px;color:var(--muted)}
.ackwho b{color:var(--ink-2);font-weight:500}
[hidden]{display:none !important}

footer{border-top:1px solid var(--line);background:var(--surface)}
footer .mw{padding-top:30px;padding-bottom:52px}
footer p{margin:0;font-size:13.5px;color:var(--muted)}
footer .conf{margin-top:11px;color:var(--crit);font-weight:500}

@media (max-width:1000px){
  .layout{grid-template-columns:1fr;gap:0;max-width:800px}
  nav.toc{position:static;padding-top:32px}
  nav.toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  nav.toc a{background:var(--surface);border:1px solid var(--line);border-left-width:1px}
  nav.toc a.active{border-color:var(--brand-coral)}
  main{padding-top:32px}
}
@media (max-width:560px){
  .mw,.layout{padding-left:20px;padding-right:20px}
  body{font-size:16px}
  .brand{gap:14px}
  .logo{width:76px}
  h1{padding-left:0;border-left:none;flex-basis:100%}
  h2{font-size:22px}
  .actions{margin-left:0;width:100%}
}
@media print{
  nav.toc,.ack,.actions,.progress{display:none !important}

  /* grid 在分頁時容易產生整頁空白，列印一律走一般流排版 */
  .layout{display:block;padding:0;max-width:none}
  main{padding-top:0}
  body{background:#fff;color:#000;font-size:10pt;line-height:1.62}

  .masthead{background:#fff;border-bottom:1pt solid #000}
  .masthead .mw,.mw{padding:0;max-width:none}
  .masthead .mw{padding-bottom:8pt;margin-bottom:10pt}
  .brand{display:block}
  .logo{filter:none;width:58px;margin-bottom:6pt}
  h1{font-size:17pt;padding-left:0;border-left:none;margin:0 0 4pt}
  .meta{gap:0 14pt;margin-top:6pt;font-size:8.5pt;color:#000}
  .meta b{color:#000}

  /* 標題後面一定要接內容，不能落在頁尾 */
  h2{display:block;font-size:13pt;margin:0 0 4pt;break-after:avoid;page-break-after:avoid}
  h2 .n{display:inline;background:none;color:#000;padding:0;font-size:11pt;margin-right:8pt}
  h3{font-size:11pt;margin:14pt 0 5pt;break-after:avoid;page-break-after:avoid}
  h3 .n{color:#000}

  p,li{orphans:3;widows:3;color:#000}
  p{margin:0 0 7pt}
  main ul{gap:5pt;margin-bottom:8pt}
  main ul>li{padding-left:14pt}
  main ul>li::before{background:#000;left:3pt;top:.68em;width:3pt;height:3pt}

  /* 不強制章節換頁——那會在前一頁尾端留下大片空白，
     內容自然流動、只避免不該斷的地方斷開即可 */
  section{break-inside:auto}
  section+section{margin-top:14pt;padding-top:12pt;border-top:.5pt solid #bbb}

  /* 表格：允許跨頁，但不切斷單一列，且表頭每頁重複。
     overflow 必須改回 visible，scroll 容器在列印時不會分頁 */
  .tw{overflow:visible;break-inside:auto;box-shadow:none;border:.5pt solid #999;
   margin:10pt 0 12pt;border-radius:0}
  table{min-width:0;font-size:9pt}
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  th{background:#eee;color:#000;padding:6pt 9pt;font-size:8pt;border-bottom:.5pt solid #999}
  td{padding:6pt 9pt;color:#000;line-height:1.5;border-bottom:.5pt solid #ddd}

  .flow,.note{break-inside:avoid;page-break-inside:avoid;box-shadow:none;background:#fff;
   border:.5pt solid #999;margin:10pt 0 12pt;padding:10pt 14pt;border-radius:0}
  .flow ol{gap:5pt;padding-left:16pt}
  .note{border-left:1.5pt solid #000}
  .lv{border:.5pt solid #666 !important;background:#fff !important;color:#000 !important}

  footer{border-top:1pt solid #000;background:#fff;margin-top:14pt;break-inside:avoid}
  footer .mw{padding:8pt 0 0}
  footer p{color:#000;font-size:8.5pt}
  footer .conf{color:#000;font-weight:700}

  @page{margin:15mm 14mm;size:A4}
}