/* =====================================================================
   數位簡報室 · 文件型頁面共用樣式
   ---------------------------------------------------------------------
   給「行前安裝指南」(info.html) 與「助教課前準備手冊」(ta.html) 共用。
   白紙底 + 聯合報藍 #00479D 實色 + 橘 #EB6120 點綴,編輯部文件感。
   ===================================================================== */
:root{
  color-scheme:light;
  --navy:#00479D; --navy-deep:#003472; --navy-soft:#E8EFF8; --navy-tint:#F4F7FC;
  --orange:#EB6120; --orange-deep:#C44A13; --orange-soft:#FDEDE4;
  --ink:#12171D; --ink-soft:#2A323C; --ink-mid:#3D4650; --mute:#69737F; --faint:#737D8A;
  --paper:#FFFFFF; --paper-sunk:#F4F7FB; --line:#DCE3EC; --line-light:#EAEFF5;
  --code-bg:#0A1A2F;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,sans-serif;
  --latin:"IBM Plex Sans","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace;
  --r-s:4px; --r-m:6px; --r-l:8px;
  --wrap:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

.mast{background:var(--navy); color:#fff}
.mast-in{max-width:var(--wrap); margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.mast-t{font-size:16.5px; font-weight:700; letter-spacing:.02em; line-height:1.5; color:#fff}
.mast-t i{font-style:normal; color:rgba(255,255,255,.45); font-weight:400; margin:0 9px}
.mast-s{font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.5; margin-top:2px}
.mast-m{font-family:var(--latin); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap}

.hero{max-width:var(--wrap); margin:0 auto; padding:60px 32px 0}
.kick{display:flex; align-items:center; gap:13px; margin-bottom:20px}
.kick .b{height:12px; width:4px; background:var(--orange); flex:0 0 auto}
.kick span{font-family:var(--latin); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--orange-deep)}
.hero h1{font-size:clamp(32px,5vw,50px); font-weight:900; line-height:1.2; margin:0 0 20px; color:var(--ink); text-wrap:balance}
.hero .lede{font-size:17.5px; color:var(--ink-mid); max-width:58ch; margin:0 0 34px; line-height:1.85}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-top:2px solid var(--navy); border-bottom:1px solid var(--line)}
.fact{padding:16px 22px 16px 0; border-right:1px solid var(--line-light)}
.fact:last-child{border-right:0}
.fact dt{font-family:var(--latin); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 5px}
.fact dd{margin:0; font-size:14.5px; font-weight:500; color:var(--ink-soft); line-height:1.5}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px 110px}

.index{background:var(--navy-tint); border-left:3px solid var(--navy); padding:24px 28px; margin:44px 0 0}
.index h2{font-family:var(--latin); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); margin:0 0 14px}
.index ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1px 24px}
.index a{display:flex; gap:11px; align-items:baseline; padding:6px 8px; margin-left:-8px; color:var(--ink-soft); text-decoration:none; font-size:14.5px; transition:color .14s,background .14s}
.index a:hover{color:var(--navy); background:#fff}
.index em{font-family:var(--latin); font-style:normal; font-size:11px; font-weight:700; color:var(--orange); flex:0 0 auto; letter-spacing:.04em}

.sec{scroll-margin-top:72px; padding-top:60px}
.sec-h{margin-bottom:26px}
.sec-h .rule{display:block; height:3px; background:var(--navy); margin-bottom:16px}
.sec-t{display:flex; align-items:baseline; gap:15px}
.sec-t em{font-family:var(--latin); font-style:normal; font-size:13px; font-weight:700; color:var(--orange); letter-spacing:.08em; flex:0 0 auto}
.sec-t h2{font-size:clamp(21px,2.7vw,26px); font-weight:700; margin:0; color:var(--ink); text-wrap:balance}
.sec h3{font-size:17px; font-weight:700; margin:38px 0 14px; color:var(--ink); padding-left:13px; border-left:3px solid var(--orange); line-height:1.6}
.sec h4{font-size:14px; font-weight:700; margin:26px 0 10px; color:var(--navy-deep)}
.sec p{margin:0 0 16px; color:var(--ink-mid); max-width:66ch}
.sec ul,.sec ol{margin:0 0 18px; padding-left:24px; color:var(--ink-mid); max-width:66ch}
.sec li{margin-bottom:8px}
.sec li::marker{color:var(--faint)}
.sec a{color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.sec a:hover{color:var(--orange-deep)}
.dim,.sec .dim{color:var(--mute)}
.small,.sec .small{font-size:14px}

code:not(.cmd code){font-family:var(--mono); font-size:.86em; background:var(--navy-tint); border:1px solid var(--line-light); padding:1px 6px; border-radius:var(--r-s); color:var(--navy-deep); white-space:nowrap}
kbd{font-family:var(--latin); font-size:.8em; font-weight:600; background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-s); padding:2px 7px; color:var(--ink-soft); white-space:nowrap}
.ui{font-weight:700; color:var(--navy-deep)}

/* download buttons */
.dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px; margin:0 0 16px}
.dlb{display:flex; gap:15px; align-items:center; border:1px solid var(--line);
  border-radius:var(--r-l); padding:17px 20px; background:#fff; transition:border-color .14s,background .14s}
.dlb:hover{border-color:var(--navy); background:var(--navy-tint)}
.sec a.dlb{text-decoration:none}
.dlb .os{width:40px; height:40px; border-radius:var(--r-m); display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; color:#fff}
.dlb .os.mac{background:var(--navy)}
.dlb .os.win{background:var(--orange-deep)}
.dlb .os svg{width:20px; height:20px; fill:currentColor; display:block}
.dlb .os.mac svg{width:21px; height:21px; margin-top:-1px}
.dlb .txt{min-width:0}
.dlb b,.sec .dlb b{display:block; font-size:15.5px; color:var(--navy); font-weight:700; margin-bottom:2px; line-height:1.4}
.dlb .txt i,.sec .dlb .txt i{display:block; font-style:normal; font-size:13px; color:var(--mute); line-height:1.55}

/* command block */
.cmd{background:var(--code-bg); margin:0 0 14px; display:flex; align-items:stretch; overflow:hidden; border-radius:var(--r-m)}
.cmd::before{content:"$"; font-family:var(--mono); font-size:13px; color:#5B7A9E; padding:14px 0 14px 17px; flex:0 0 auto; user-select:none}
.cmd.ps::before{content:">"}
.cmd code{font-family:var(--mono); font-size:13px; line-height:1.7; color:#E4ECF5; padding:14px; flex:1 1 auto; overflow-x:auto; white-space:pre; display:block}
.copy{flex:0 0 auto; border:0; border-left:1px solid rgba(255,255,255,.12); background:transparent; color:#8FA6C0; font-family:var(--sans); font-size:12.5px; font-weight:500; padding:0 17px; cursor:pointer; transition:background .14s,color .14s}
.copy:hover{background:rgba(255,255,255,.08); color:#fff}
.copy.done{color:#6FD79A}
.cmd-note,.sec p.cmd-note{font-size:13px; color:var(--faint); margin:-8px 0 18px; max-width:none}

.pf-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 22px}
.pf{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:#fff}
.pf-h{display:flex; align-items:center; gap:10px; padding:12px 20px; background:var(--paper-sunk); border-bottom:1px solid var(--line-light)}
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--latin); font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:4px 11px 4px 9px; border-radius:var(--r-s); color:#fff; white-space:nowrap}
.tag svg{width:12px; height:12px; fill:currentColor; flex:0 0 auto; display:block}
.tag.mac svg{width:13px; height:13px; margin-top:-1px}
.tag.mac{background:var(--navy)}
.tag.win{background:var(--orange-deep)}
.pf-h span:not(.tag){font-size:13px; color:var(--mute)}
.pf-b{padding:20px}
.pf-b>*:last-child{margin-bottom:0}
.pf-b p{font-size:14.5px; margin:0 0 12px}
.pf-b ul{font-size:14.5px}

.note{border:1px solid var(--line); border-radius:var(--r-l); padding:20px 24px; margin:0 0 22px; background:#fff}
.note h5{font-family:var(--latin); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; color:var(--mute)}
.note p{font-size:15px; margin:0 0 10px; max-width:none}
.note>*:last-child{margin-bottom:0}
.note ul{font-size:15px; max-width:none}
.note.stop{background:var(--orange-soft); border-color:#F5C9AF}
.note.stop h5{color:var(--orange-deep)}
.note.warn{background:#FFF7E8; border-color:#F0DDB5}
.note.warn h5{color:#9A6A12}
.note.key{background:var(--navy-soft); border-color:#C7D9EE}
.note.key h5{color:var(--navy)}

.tw{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r-l)}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:560px; background:#fff}
th{text-align:left; font-family:var(--latin); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#fff; background:var(--navy); padding:12px 18px; white-space:nowrap}
td{padding:13px 18px; border-bottom:1px solid var(--line-light); color:var(--ink-mid); vertical-align:top; line-height:1.75}
tbody tr:nth-child(even) td{background:var(--navy-tint)}
tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
td code{white-space:nowrap}
.num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
th.num{text-align:right}
.tbl-note,.sec p.tbl-note{font-size:13px; color:var(--faint); margin:-14px 0 22px; max-width:none}

.gloss{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.gi{display:grid; grid-template-columns:200px minmax(0,1fr); border-bottom:1px solid var(--line-light); background:#fff}
.gi:nth-child(even){background:var(--navy-tint)}
.gi:last-child{border-bottom:0}
.gt{padding:15px 20px; border-right:1px solid var(--line-light)}
.gt b{display:block; font-size:14.5px; color:var(--navy-deep); font-weight:700; line-height:1.5}
.gt span{display:block; font-family:var(--latin); font-size:11px; color:var(--faint); margin-top:2px}
.gd{padding:15px 20px; font-size:14.5px; color:var(--ink-mid); line-height:1.8}

.sec ol.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 22px; max-width:66ch}
.steps>li{counter-increment:s; position:relative; padding-left:44px; margin-bottom:22px}
.steps>li::before{content:counter(s); position:absolute; left:0; top:5px; width:24px; height:24px; background:var(--navy); color:#fff; font-family:var(--latin); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; border-radius:var(--r-s)}
.steps>li::after{content:""; position:absolute; left:11.5px; top:33px; bottom:-14px; width:1px; background:var(--line)}
.steps>li:last-child::after{display:none}
.steps>li>b{display:block; font-size:15.5px; color:var(--ink); margin-bottom:4px; font-weight:700}

.check{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; margin:0 0 16px}
.check label{display:flex; gap:14px; align-items:flex-start; padding:14px 20px; background:#fff; cursor:pointer; font-size:15px; color:var(--ink-mid); border-bottom:1px solid var(--line-light); transition:background .14s}
.check label:last-child{border-bottom:0}
.check label:hover{background:var(--navy-tint)}
.check input{appearance:none; width:18px; height:18px; flex:0 0 auto; margin-top:5px; border:1.5px solid #B7C2CF; border-radius:var(--r-s); background:#fff; cursor:pointer; position:relative; transition:background .14s,border-color .14s}
.check input:checked{background:var(--navy); border-color:var(--navy)}
.check input:checked::after{content:""; position:absolute; left:5.5px; top:1.5px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
.check input:checked+span{color:var(--faint); text-decoration:line-through}
.prog{display:flex; align-items:center; gap:14px; margin:0 0 22px}
.prog b{font-family:var(--latin); font-size:12.5px; font-weight:600; color:var(--mute); white-space:nowrap}
.pbar{flex:1; height:6px; background:var(--paper-sunk); overflow:hidden; max-width:300px; border-radius:3px}
.pbar i{display:block; height:100%; width:0; background:var(--orange); transition:width .3s}

/* collapsible */
.fold{border-top:1px solid var(--line)}
.fold details{border-bottom:1px solid var(--line-light)}
.fold summary{display:flex; gap:14px; align-items:baseline; padding:18px 4px; cursor:pointer; list-style:none; font-size:16px; font-weight:700; color:var(--ink); transition:color .14s}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"Q"; font-family:var(--latin); font-size:12px; font-weight:700; color:var(--orange); flex:0 0 auto; line-height:1.9}
.fold.plain summary::before{content:"▸"; color:var(--navy); font-size:13px}
.fold.plain details[open] summary::before{content:"▾"}
.fold summary::after{content:"+"; margin-left:auto; font-family:var(--latin); font-size:19px; font-weight:400; color:var(--faint); line-height:1.4; flex:0 0 auto}
.fold details[open] summary::after{content:"−"}
.fold summary:hover{color:var(--navy)}
.fold .a{padding:0 4px 22px 30px}
.fold .a p{font-size:15px; margin:0 0 12px; max-width:66ch}
.fold .a>*:last-child{margin-bottom:0}
.fold .a ul{font-size:15px; margin-bottom:12px}

.foot{border-top:3px solid var(--navy); margin-top:76px; padding-top:24px; font-size:13.5px; color:var(--faint); max-width:66ch; line-height:1.8}
.foot p{margin:0 0 10px; color:var(--faint)}

/* ===== sticky progress nav ===== */
.navbar{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.navbar-in{max-width:var(--wrap); margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:16px; height:52px}
.nav-toggle{
  display:flex; align-items:center; gap:9px; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--ink); padding:6px 10px;
  margin-left:-10px; border-radius:var(--r-s); transition:background .14s;
}
.nav-toggle:hover{background:var(--navy-tint)}
.nav-toggle em{font-family:var(--latin); font-style:normal; font-size:11.5px; font-weight:700; color:var(--orange); letter-spacing:.06em}
.nav-toggle .caret{font-size:11px; color:var(--faint); transition:transform .18s}
.navbar.open .nav-toggle .caret{transform:rotate(180deg)}
.nav-steps{margin-left:auto; display:flex; gap:4px; align-items:center}
.nav-steps i{width:16px; height:3px; border-radius:2px; background:var(--line); display:block; transition:background .2s}
.nav-steps i.done{background:var(--navy)}
.nav-steps i.now{background:var(--orange)}
.nav-pct{font-family:var(--latin); font-size:11.5px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums; min-width:34px; text-align:right}
.nav-prog{height:2px; background:transparent; margin-top:-1px}
.nav-prog i{display:block; height:2px; width:0; background:var(--orange); transition:width .12s linear}
.nav-menu{border-top:1px solid var(--line-light); background:#fff; max-height:0; overflow:hidden; transition:max-height .22s ease}
.navbar.open .nav-menu{max-height:420px; overflow:auto}
.nav-menu ol{max-width:var(--wrap); margin:0 auto; padding:14px 32px 18px; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px 20px}
.nav-menu a{display:flex; gap:10px; align-items:baseline; padding:7px 9px; margin-left:-9px; color:var(--ink-soft); text-decoration:none; font-size:14px; border-radius:var(--r-s)}
.nav-menu a:hover{background:var(--navy-tint); color:var(--navy)}
.nav-menu a.cur{background:var(--navy); color:#fff}
.nav-menu a.cur em{color:#fff}
.nav-menu em{font-family:var(--latin); font-style:normal; font-size:11px; font-weight:700; color:var(--orange); flex:0 0 auto}

/* ===== UI 圖解 ===== */
.shotslot{border:1.5px dashed #C6D2E0; border-radius:var(--r-l); background:var(--navy-tint); padding:32px 26px; text-align:center; margin:0 0 16px}
.shotslot span{display:block; font-family:var(--latin); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:9px}
.shotslot i{display:block; font-style:normal; font-size:14px; color:var(--mute); max-width:54ch; margin:0 auto; line-height:1.75}
.legend{list-style:none; padding:0; margin:14px 0 24px; display:grid; gap:7px; max-width:66ch}
.legend li{display:flex; gap:11px; align-items:baseline; font-size:14.5px; color:var(--ink-mid); margin:0}
.sec ol.legend li .n{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--orange); color:#fff; font-family:var(--latin); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; align-self:flex-start; margin-top:3px}
.sec ol.legend li b{color:var(--ink); font-weight:700}

/* =====================================================================
   上課頁(lesson.html)專用
   ---------------------------------------------------------------------
   學員當天邊操作邊看,字級整體放大一級,並統一以 body.lesson 限定範圍,
   不影響 info.html 與 ta.html。
   ===================================================================== */
body.lesson{font-size:17.5px}
body.lesson .hero .lede{font-size:19px}
/* 抬頭:班別下方的正式標示列 */
body.lesson .hero-meta{
  margin:-8px 0 22px; font-size:16px; color:var(--mute); letter-spacing:.02em;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}

/* 課程資訊列:原本文字幾乎貼著上方藍線,改成有留白的淺底面板 */
body.lesson .facts-wrap{margin-top:34px}
body.lesson .facts-label{
  font-family:var(--latin); font-size:11.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy); margin:0 0 10px;
}
body.lesson .facts{
  border-top:3px solid var(--navy); border-bottom:0;
  background:var(--navy-tint); margin-top:0;
  padding:10px 0 10px 26px;
}
body.lesson .fact{padding:22px 26px 20px 0; border-right:1px solid #D8E2EF}
body.lesson .fact:last-child{border-right:0}
body.lesson .fact dt{font-size:12px; letter-spacing:.1em; margin-bottom:11px; color:var(--mute)}
body.lesson .fact dd{font-size:18px; font-weight:600; color:var(--ink)}

/* 章節標題旁的計量標籤 */
.sec-t .cnt{
  font-family:var(--latin); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--mute); background:var(--paper-sunk); border:1px solid var(--line);
  border-radius:var(--r-s); padding:3px 10px; white-space:nowrap; flex:0 0 auto;
}

/* 實際畫面截圖 */
.shot{margin:0 0 24px; padding:0}
.shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:var(--r-l); background:#fff;
}
.shot figcaption{
  margin-top:12px; padding-left:13px; border-left:3px solid var(--orange);
  font-size:16px; color:var(--ink-mid); line-height:1.8; max-width:66ch;
}
.shot figcaption b{color:var(--ink)}

/* 文件頁沒有 app.css 的 .btn,這裡自帶一顆實心按鈕 */
.docbtn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--navy); color:#fff; font-size:16px; font-weight:700;
  padding:13px 24px; border-radius:var(--r-m); text-decoration:none;
  transition:background .14s;
}
.docbtn:hover{background:var(--navy-deep)}
.sec a.docbtn,.sec a.docbtn:hover,.note a.docbtn{color:#fff; text-decoration:none}
.docbtn svg{width:17px; height:17px; flex:0 0 auto; display:block}

/* 指向頁內其他章節的連結 */
.jump{color:var(--navy); font-weight:700; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; white-space:nowrap}
.jump:hover{color:var(--orange-deep)}
.jump::after{content:"↓"; margin-left:4px; font-size:.9em; display:inline-block; text-decoration:none}
body.lesson .sec p,body.lesson .sec ul,body.lesson .sec ol{font-size:17.5px}
body.lesson .note h5{font-size:12.5px; letter-spacing:.1em}
body.lesson .note p,body.lesson .note ul{font-size:17px}
body.lesson .dim,body.lesson .sec .dim,
body.lesson .small,body.lesson .sec .small{font-size:16px; color:var(--mute)}
body.lesson table{font-size:16.5px}
body.lesson th{font-size:12px; letter-spacing:.1em}
body.lesson .tbl-note,body.lesson .sec p.tbl-note{font-size:15px}
body.lesson .steps>li>b{font-size:18px}
body.lesson .steps>li{font-size:17px}
body.lesson .pf-b p,body.lesson .pf-b ul{font-size:16.5px}
body.lesson .pf-h span:not(.tag){font-size:15px}
body.lesson .tag{font-size:13px}
body.lesson .dlb b,body.lesson .sec .dlb b{font-size:17px}
body.lesson .dlb .txt i,body.lesson .sec .dlb .txt i{font-size:14.5px}
body.lesson .check label{font-size:17px}
body.lesson .prog b{font-size:14.5px}
body.lesson .fold summary{font-size:17.5px}
body.lesson .fold .a p,body.lesson .fold .a ul{font-size:17px}
body.lesson .foot,body.lesson .foot p{font-size:15px}

/* 步驟中的平台標記:這一步只有 Mac / 只有 Windows 要做 */
.only{display:inline-flex; align-items:center; gap:5px; font-family:var(--latin); font-size:12.5px;
  font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:var(--r-s); color:#fff;
  vertical-align:2px; margin-right:8px; white-space:nowrap}
.only.mac{background:var(--navy)}
.only.win{background:var(--orange-deep)}
.only.both{background:#55606E}
.steps>li>b .only{vertical-align:1px}

/* 「你會看到」提示:每一步做完該出現什麼畫面 */
.seen{display:block; margin-top:8px; padding-left:13px; border-left:2px solid var(--line);
  font-size:16px; color:var(--mute); line-height:1.75}
.seen b,.seen strong{color:var(--ink-mid); font-weight:700}
.steps>li strong{font-weight:700; color:var(--ink)}

/* ===== 上課頁:課程簡報主視覺(lesson.html) =====
   當天最常被點的東西,做成深藍實色卡片,和白底文件區隔開。 */
/* 內文中單獨出現的下載按鈕 */
.dlb.dl-inline{display:inline-flex; margin:0}
.sec .dlb.dl-inline{text-decoration:none}

.cta{max-width:var(--wrap); margin:0 auto; padding:40px 32px 8px}
.cta-box{
  position:relative; overflow:hidden; border-radius:var(--r-l);
  background:linear-gradient(115deg,#003472 0%,#00479D 58%,#0B5BBF 100%);
  color:#fff; padding:38px 40px; display:flex; align-items:center; gap:36px; flex-wrap:wrap;
}
/* 右上角的報頭色塊,純裝飾 */
.cta-box::after{
  content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px;
  background:var(--orange); opacity:.16; transform:rotate(18deg); pointer-events:none;
}
.cta-txt{flex:1 1 300px; min-width:0; position:relative; z-index:1}
.cta-k{display:flex; align-items:center; gap:11px; font-family:var(--latin); font-size:12px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#FFC7A6; margin:0 0 12px}
.cta-k::before{content:""; height:13px; width:4px; background:var(--orange); flex:0 0 auto}
.cta-t{font-size:clamp(24px,3.4vw,32px); font-weight:900; line-height:1.3; margin:0 0 10px; color:#fff; letter-spacing:.01em}
.cta-d{font-size:16.5px; color:rgba(255,255,255,.82); margin:0; line-height:1.75; max-width:46ch}
.cta-act{flex:0 0 auto; position:relative; z-index:1; text-align:center}
.cta-btn{
  display:inline-flex; align-items:center; gap:11px; background:var(--orange); color:#fff;
  font-size:19px; font-weight:900; letter-spacing:.02em; padding:20px 38px; border-radius:var(--r-m);
  text-decoration:none; box-shadow:0 4px 0 var(--orange-deep); transition:transform .12s,box-shadow .12s,background .14s;
}
.cta-btn:hover{background:#F06B29; transform:translateY(-2px); box-shadow:0 6px 0 var(--orange-deep)}
.cta-btn:active{transform:translateY(2px); box-shadow:0 2px 0 var(--orange-deep)}
.sec a.cta-btn,.cta a.cta-btn,.cta a.cta-btn:hover{text-decoration:none; color:#fff}
.cta-btn svg{width:20px; height:20px; flex:0 0 auto; display:block}
.cta-sub{display:block; margin-top:11px; font-size:13.5px; color:rgba(255,255,255,.6); font-family:var(--latin); letter-spacing:.04em}
.cta-wait{display:inline-block; font-size:16.5px; font-weight:700; color:rgba(255,255,255,.85);
  border:1.5px dashed rgba(255,255,255,.4); border-radius:var(--r-m); padding:19px 32px}

/* 卡片下方的進場說明 */
.cta-note{
  list-style:none; margin:0; padding:16px 20px 16px 22px;
  background:var(--navy-tint); border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-l) var(--r-l);
}
.cta-note li{
  position:relative; padding-left:20px; margin:0 0 7px;
  font-size:15.5px; color:var(--ink-mid); line-height:1.75;
}
.cta-note li:last-child{margin-bottom:0}
.cta-note li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--orange);
}
.cta-note b{color:var(--navy-deep)}

/* 交件資料夾:班別資料夾名稱 */
.share-folder code{
  font-family:var(--mono); font-size:14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-s); padding:3px 9px;
  color:var(--navy-deep); margin-left:4px;
}
.cta-box{border-radius:var(--r-l) var(--r-l) 0 0}

@media (max-width:860px){
  .navbar-in,.nav-menu ol{padding-left:20px; padding-right:20px}
  .nav-steps{display:none}
  .mast-in,.hero,.wrap,.cta{padding-left:20px; padding-right:20px}
  body.lesson .facts{padding:6px 20px}
  body.lesson .fact{padding:18px 0 16px; border-right:0}
  .cta-box{padding:26px 22px; gap:22px}
  .cta-act{width:100%}
  .cta-btn{width:100%; justify-content:center}
  .hero{padding-top:40px}
  .mast-m{display:none}
  .pf-grid{grid-template-columns:1fr}
  .gi{grid-template-columns:minmax(0,1fr)}
  .gt{border-right:0; border-bottom:1px solid var(--line-light)}
  .fact{border-right:0; border-bottom:1px solid var(--line-light); padding-right:0}
  .fact:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
@media print{.copy,.index,.navbar{display:none} .fold .a{display:block!important}}