/* ==========================================================================
   IQT 內部操作說明 — 共用樣式（深色）
   所有頁面引用這一份。改配色只改 :root，不要在單一頁面內寫 style。

   設計原則（改東西前先讀）
   -------------------------------------------------------------------------
   這是一份【內部索引文件】，不是產品官網。所以刻意不做這些事：
     · 不用彩色橫槓、色塊當裝飾
     · 不用圓角膠囊 badge
     · 不用大寫寬字距的英文小標
     · 不用純裝飾性編號（章節編號例外，因為內文會引用「第 03 節」）
     · 灰階保持中性、不帶色相；藍色只留給連結與焦點
   有疑慮時，選比較安靜的那個做法。
   ========================================================================== */

:root{
  /* 底層 — 中性灰，不帶藍 */
  --paper:#191B1D;        /* 頁面底 */
  --card:#272B2E;         /* 提示框、步驟卡的底 */
  --card-2:#33373A;       /* 圖框、程式碼底 */

  /* 文字 */
  --ink:#DEDFE0;          /* 主文 */
  --ink-2:#ADB1B4;        /* 次要說明 */
  --ink-3:#9B9FA2;        /* 標籤、時間、圖號 */

  /* 線 */
  --rule:#34383B;         /* 細分隔線 */
  --rule-hard:#666B6E;    /* 強分隔線（深色底要比底色亮，不能用近黑） */

  /* 語意色 — 只在有意義時使用，不當裝飾 */
  --accent:#409CFF;       /* 連結、焦點。刻意高飽和 — 深色底上唯一的彩色來源 */
  --warn:#DFAA63;
  --good:#71C49C;

  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 版面骨架 ---------- */
.shell{max-width:1120px;margin:0 auto;padding:0 28px 96px;display:grid;grid-template-columns:1fr;gap:0 56px}
@media (min-width:1040px){.shell{grid-template-columns:206px minmax(0,1fr);padding-top:8px}}
.shell.wide{grid-template-columns:1fr;max-width:940px}

/* ---------- 頁首 ---------- */
.masthead{grid-column:1/-1;border-bottom:1px solid var(--rule-hard);padding:64px 0 26px;margin-bottom:44px}
.masthead h1{font-family:var(--sans);font-weight:700;font-size:clamp(29px,4.4vw,42px);line-height:1.24;letter-spacing:-.022em;margin:0 0 14px;color:#F2F3F4}
.masthead .sub{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0;max-width:54ch}
.masthead .back{display:inline-block;font-size:13.5px;color:var(--ink-3);text-decoration:none;margin:0 0 20px}
.masthead .back:hover{color:var(--accent)}

/* 文件資訊：版本／日期／所需時間 */
.meta{display:flex;flex-wrap:wrap;gap:4px 32px;margin:22px 0 0;padding:0;font-size:13.5px;color:var(--ink-3)}
.meta div{display:flex;gap:8px;align-items:baseline}
.meta dt{margin:0}
.meta dd{margin:0;color:var(--ink-2)}
.meta dd.zero{color:var(--good)}
.meta dd.flag{color:var(--warn)}

/* ---------- 側邊目錄 ---------- */
nav.toc{display:none}
@media (min-width:1040px){
  nav.toc{display:block;position:sticky;top:32px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto}
  nav.toc ol{list-style:none;margin:0;padding:0}
  nav.toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--rule);color:var(--ink-2);text-decoration:none;font-size:13.5px;line-height:1.5}
  nav.toc a:hover{color:var(--accent);border-left-color:var(--accent)}
  nav.toc a .n{color:var(--ink-3);margin-right:8px;font-variant-numeric:tabular-nums}
}

/* ---------- 章節與基本排版 ---------- */
main{min-width:0}
section{margin:0 0 54px;scroll-margin-top:24px}
.sec-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule-hard);padding-bottom:9px;margin-bottom:24px}
.sec-head .num{color:var(--ink-3);font-size:16px;flex:none;font-variant-numeric:tabular-nums}
.sec-head h2{font-family:var(--sans);font-size:clamp(19px,2.4vw,23px);font-weight:700;margin:0;line-height:1.4;letter-spacing:-.012em;color:#EDEEEF}
h3{font-size:15.5px;font-weight:700;margin:32px 0 10px}
p{margin:0 0 15px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px}
.mono{font-family:var(--mono);font-size:.9em;color:#E6E7E8}
code{font-family:var(--mono);font-size:.9em;background:var(--card-2);color:#E6E7E8;padding:2px 6px;word-break:break-all}
strong{font-weight:700;color:#EDEEEF}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
pre{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:var(--card-2);color:#E0E1E2;
  padding:14px 16px;overflow-x:auto;margin:12px 0 16px}
pre .c{color:var(--ink-3)}

/* ---------- 前言與重點列 ---------- */
.lede{font-size:16.5px;line-height:1.9;border-left:2px solid var(--rule-hard);padding-left:20px;margin-bottom:26px}
.pills{list-style:none;padding:0;margin:0 0 16px}
.pills li{position:relative;padding-left:20px;margin-bottom:10px}
.pills li::before{content:"";position:absolute;left:0;top:.92em;width:8px;height:1px;background:var(--ink-3)}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:min(100%,520px)}
caption{caption-side:top;text-align:left;font-size:13.5px;color:var(--ink-3);padding-bottom:9px}
th,td{border-bottom:1px solid var(--rule);padding:12px 16px 12px 0;text-align:left;vertical-align:top;line-height:1.7}
thead th{border-bottom:1px solid var(--rule-hard);font-size:13.5px;color:var(--ink-3);font-weight:400}
tbody tr:last-child td{border-bottom:1px solid var(--rule-hard)}

/* ---------- 圖片：淺色截圖需要卡紙框，不然刺眼 ---------- */
figure{margin:0 0 24px}
figure .mat{display:block;background:var(--card-2);padding:10px}
figure img,figure svg{display:block;max-width:100%;height:auto}
figcaption{font-size:13.5px;color:var(--ink-2);padding-top:10px;line-height:1.7}
figcaption .fn{color:var(--ink-3);margin-right:8px;font-variant-numeric:tabular-nums}
figure a.zoom{display:block;text-decoration:none}
figure a.zoom:hover .mat{background:var(--rule)}

/* ---------- 提示框 ---------- */
.note{border-left:2px solid var(--rule-hard);background:var(--card);padding:16px 20px;margin:0 0 20px;font-size:15px}
.note .tag{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;font-size:14.5px}
.note.warn .tag{color:var(--warn)}
.note.warn{border-left-color:var(--warn)}
.note p:last-child,.note ul:last-child{margin-bottom:0}

/* ---------- 憑證卡（查詢用，不是操作步驟） ----------
   用在「同事只想看一個值」的頁面：Wi-Fi 密碼、共用資料夾路徑之類。
   密碼刻意放大並用等寬字型 — 這種頁面是拿來照著打的，字小就會打錯。
   .pw 設 user-select:all，點一下就選取整段，不必自己拖曳。 */
.cred{border:1px solid var(--rule-hard);background:var(--card);padding:24px 26px;margin:0 0 20px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:720px){.cred{grid-template-columns:minmax(0,1fr) auto;gap:0 32px}}
.cred .lbl{font-size:13.5px;color:var(--ink-3);margin:0 0 4px}
.cred .ssid{font-size:23px;font-weight:700;color:#F2F3F4;margin:0 0 18px;letter-spacing:-.01em}
.cred .pw{font-family:var(--mono);font-size:clamp(19px,3.2vw,25px);letter-spacing:.04em;
  color:#F2F3F4;background:var(--card-2);padding:12px 16px;margin:0;display:inline-block;
  word-break:break-all;user-select:all;-webkit-user-select:all}
.cred .hint{font-size:13.5px;color:var(--ink-3);margin:10px 0 0}
.cred-main>*:last-child{margin-bottom:0}
.cred-qr{margin:0;flex:none;text-align:center}
.cred-qr .mat{display:inline-block;padding:8px;background:#fff}
.cred-qr img{width:180px;height:180px;image-rendering:pixelated}
.cred-qr figcaption{font-size:13px;color:var(--ink-3);padding-top:9px;width:196px;margin:0 auto;line-height:1.6}

/* ---------- 交叉引用：指向另一篇教學 ----------
   用在「做這篇之前要先會做另一件事」的地方。
   目標教學還沒寫時用 .soon + .st，寫好之後把內容換成 <a> 就好。 */
.xref{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  border-left:2px solid var(--accent);background:var(--card);padding:14px 18px;margin:0 0 20px;font-size:15px}
.xref .lbl{color:var(--ink-3);font-size:14px;flex:none}
.xref a{font-weight:500}
.xref .soon{color:var(--ink-3)}
.xref .st{color:var(--ink-3);font-size:14px}

/* ---------- 步驟卡片 ---------- */
.step-card{border-left:2px solid var(--rule-hard);background:var(--card);padding:18px 22px 6px;margin:0 0 18px}
.step-card>.h{font-weight:700;font-size:16px;margin:0 0 12px;color:#EDEEEF;line-height:1.6}
.step-card>.h em{font-style:normal;color:var(--ink-3);font-weight:400;margin-right:10px;font-variant-numeric:tabular-nums}
.step-card>.h .on{font-weight:400;font-size:14px;color:var(--ink-3);margin-left:10px;white-space:nowrap}
.step-card>.h .on::before{content:"／ "}
.step-card figure{margin:16px 0 8px}

/* ---------- 頁尾 ---------- */
footer{grid-column:1/-1;border-top:1px solid var(--rule);margin-top:40px;padding-top:16px;font-size:13.5px;color:var(--ink-3)}

/* ==========================================================================
   入口頁
   ========================================================================== */

.search{grid-column:1/-1;margin:0 0 44px;max-width:560px}
.search label{display:block;font-size:14px;color:var(--ink-2);margin:0 0 8px}
.search input{width:100%;background:var(--paper);border:1px solid var(--rule-hard);
  color:var(--ink);font-family:var(--sans);font-size:15.5px;padding:11px 14px;line-height:1.5}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-color:var(--accent)}

.results{margin:26px 0 0;display:none}
.results.on{display:block}
.results .rcount{font-size:14px;color:var(--ink-3);margin:0 0 6px}
.results ol{list-style:none;padding:0;margin:0}
.results li{border-top:1px solid var(--rule)}
.results li:last-child{border-bottom:1px solid var(--rule)}
.results a,.results .na{display:flex;gap:20px;align-items:baseline;padding:13px 0;text-decoration:none;color:var(--ink)}
.results .t{color:var(--accent)}
.results .na{cursor:default}
.results .na .t{color:var(--ink-3)}  /* 準備中：不可點就不給藍色 */
.results a:hover .t{color:var(--accent);text-decoration:underline}
.results .t{font-size:15.5px}
.results .d{font-size:14px;color:var(--ink-3)}
.results .cat{color:var(--ink-3);font-size:14px;margin-left:auto;white-space:nowrap;flex:none}
.results .empty{padding:16px 0;color:var(--ink-2);font-size:15px;border-top:1px solid var(--rule)}

/* 分類清單 ------------------------------------------------------------------
   每個分類有自己的調性色（--c），只用在【圖示】與【標題下方的粗線】。
   文字顏色一律不受分類色影響 — 藍色永遠只代表「這篇可以點」。
   這樣顏色帶的是資訊，不是裝飾。
   -------------------------------------------------------------------------- */
.cats{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:0 64px}
.cats>.col{min-width:0}          /* 每欄獨立 — 欄高不互相牽動，也沒有 DOM/視覺順序落差 */
@media (min-width:820px){
  .cats{grid-template-columns:1fr 1fr}
  /* 只有真的分成兩欄時才清掉欄底間距。單欄堆疊時清掉會讓下一個分類貼上來 */
  .cats>.col>.group:last-child{margin-bottom:0}
}
.cats.hide{display:none}

.group.c-remote {--c:#409CFF}   /* 遠端與網路 */
.group.c-print  {--c:#33B294}   /* 印表機與掃描器 */
.group.c-account{--c:#A990FF}   /* 帳號與電腦 */
.group.c-onboard{--c:#CE9430}   /* 入職與離職 */
.group.c-ops    {--c:#9B9FA2}   /* IT 維運 — 刻意用中性灰，一般同事不必注意這一區 */

.group{margin:0 0 48px}
.group>.gh{display:flex;gap:12px;align-items:center;margin:0 0 6px}
.group>.gh .ic{flex:none;width:24px;height:24px;color:var(--c)}
.group>.gh h2{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.012em;margin:0;color:#EDEEEF;line-height:1.35}
.group>.cd{font-size:13.5px;color:var(--ink-3);margin:0 0 15px;line-height:1.6}

.group ul{list-style:none;padding:0;margin:0;border-top:2px solid var(--c)}
.group li{border-bottom:1px solid var(--rule);margin:0}
.group li .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 18px;padding:14px 0;text-decoration:none}
.group li .row .t{grid-row:1;grid-column:1;color:var(--accent);font-size:16px;font-weight:500;line-height:1.5}
.group li .row .mins{grid-row:1;grid-column:2;color:var(--ink-3);font-size:13px;white-space:nowrap}
.group li .row .d{grid-row:2;grid-column:1/-1;color:var(--ink-3);font-size:13.5px;line-height:1.65}
.group li a.row:hover .t{text-decoration:underline}
.group li .row.todo{cursor:default}
.group li .row.todo .t{color:var(--ink-3);font-weight:400}

/* ---------- 無障礙 ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   列印：自動翻回淺色（這類教學一定有人要印出來）
   ========================================================================== */
@media print{
  :root{
    --paper:#fff;--card:#fff;--card-2:#fff;
    --ink:#000;--ink-2:#333;--ink-3:#555;
    --rule:#ccc;--rule-hard:#000;
    --accent:#26456E;
    --warn:#8A4B00;
    --good:#1D6F52;
  }
  html{color-scheme:light}
  /* 分類色轉黑。用屬性選擇器才不會漏掉新增的分類（只寫 .group 權重不夠） */
  .group[class*="c-"]{--c:#000}
  .group>.gh .ic{color:#000}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.6}
  .shell{display:block;max-width:none;padding:0}
  nav.toc,.search,.results{display:none}
  .masthead h1,.sec-head h2,.step-card>.h,.group>.gh h2,strong{color:#000}
  code,pre{background:#F0F0F0;color:#000}
  .mono{color:#000;background:none}
  pre{border:1px solid #999}
  figure .mat{background:#fff;padding:0}
  .cred{border:1px solid #000}
  .cred .ssid,.cred .pw{color:#000}
  .cred .pw{background:#F0F0F0}
  .cred-qr .mat{padding:0}
  figure img{border:1px solid #999}
  section{margin-bottom:22pt}
  .sec-head,h3{break-after:avoid}
  table,tr,.note,.step-card,figure,.xref,.cred{break-inside:avoid}
  a{color:#000;text-decoration:none}
}