main.lesson-page{max-width:1180px;padding:26px 32px;margin:auto}.crumb{font-size:12px;color:#718092}.lesson-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}.lesson-hero h1{font-size:36px;line-height:1.4}.lesson-hero img{width:100%;height:auto;border-radius:14px}.lead{font-size:17px;color:#536d85}.meta{font-size:12px;color:var(--muted)}.reading-layout{display:grid;grid-template-columns:minmax(0,780px) 200px;gap:64px}article{font-size:16px;line-height:1.95;min-width:0}article section{padding:24px 0;scroll-margin-top:90px}article h2{font-size:25px;color:var(--navy);line-height:1.5}article h3{font-size:19px;color:var(--navy);margin-top:30px}article a{color:#235f83;text-decoration:underline;text-underline-offset:4px}.source{font-size:12px;white-space:normal}.takeaway,.notes{background:#f1f7fb;padding:22px 26px;border-radius:12px}.takeaway p{margin:5px 0 12px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.compare>div{border:1px solid #e0e8ef;border-radius:12px;padding:22px}.compare span{font-size:12px;color:#d35422}.compare h3{margin:8px 0}.compare p{margin-bottom:0}.file-link{display:inline-block;padding:10px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.95 "Noto Sans TC",sans-serif;background:#f7f8fa;border:1px solid #e3e8ed;border-radius:10px;padding:22px}.status-note{border-left:3px solid #efaa77;padding:10px 20px;background:#fff9f3;font-size:14px}.lesson-toc{position:sticky;top:110px;align-self:start;display:grid;gap:12px;padding-top:34px;font-size:13px}.lesson-toc b{font-size:14px;color:var(--navy)}.lesson-toc a{color:#718092}.checklist{padding:22px 22px 22px 44px;border:1px solid #dfebf3;border-radius:12px}.sources p{font-size:12px;color:#78899a}@media(max-width:900px){.reading-layout{grid-template-columns:1fr;gap:0}.lesson-toc{display:none}.lesson-hero{gap:24px}.lesson-hero h1{font-size:29px}}@media(max-width:600px){main.lesson-page{padding:20px}.lesson-hero{display:block;padding:24px 0}.lesson-hero img{margin-top:15px;max-height:180px;object-fit:cover}.lesson-hero h1{font-size:28px}.lead{font-size:15px}article{font-size:15px}article h2{font-size:23px}.compare{grid-template-columns:1fr}pre{padding:16px;font-size:13px}.notes,.takeaway{padding:18px}}

.real-shot{margin:26px 0}.real-shot img{display:block;width:100%;height:auto;border:1px solid #e0e7ed;border-radius:10px}.real-shot figcaption{font-size:13px;line-height:1.7;color:#64778a;margin-top:9px}

.result-figure{margin:26px 0}.result-scroll{overflow-x:auto;border:1px solid #dfe7ed;border-radius:10px;background:white}.result-scroll:focus-visible{outline:2px solid #d86632;outline-offset:3px}.result-table{width:100%;min-width:680px;table-layout:fixed;border-collapse:collapse;font-size:15px;line-height:1.7}.result-table caption{text-align:left;font-weight:700;padding:14px 16px;color:#18364d}.result-table .work{width:24%}.result-table .person{width:100px}.result-table .deadline{width:114px}.result-table th,.result-table td{text-align:left;padding:14px 12px;border-bottom:1px solid #dfe7ed;vertical-align:top;overflow-wrap:anywhere}.result-table th{background:#edf5fa;color:#18364d}.result-table th:nth-child(2),.result-table th:nth-child(3),.result-table td:nth-child(2),.result-table td:nth-child(3){white-space:nowrap;overflow-wrap:normal}.result-table tbody tr:last-child td{border-bottom:0}.result-figure figcaption{font-size:13px;line-height:1.7;color:#64778a;margin-top:9px}

/* 真實介面與教學標記分開；小螢幕保留可讀尺寸並只捲動圖框。 */
.guided-step{padding:8px 0 30px;border-bottom:1px solid #e3e8ed}.guided-step h3{display:flex;align-items:baseline;gap:12px}.step-number{font-size:14px;color:#b74e26;flex:none}.step-start{color:#566b7b}.step-actions{padding-left:25px}.step-actions li{margin:10px 0}.step-expect{background:#edf5f0;border-left:3px solid #6e927e;padding:12px 16px}.step-trouble{font-size:14px;color:#596b78}.step-figure{margin:20px 0}.shot-scroll{overflow-x:auto;border:1px solid #dbe2e8;border-radius:12px;background:#faf9f6}.shot-canvas{position:relative;min-width:680px;line-height:0}.shot-canvas img{display:block;width:100%;height:auto}.shot-marker{position:absolute;border:2px solid #cf602b;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px #fff8}.shot-marker b{position:absolute;left:-10px;top:-13px;border-radius:50%;min-width:24px;height:24px;display:grid;place-items:center;background:#a43d13;color:white;font:700 13px/1 sans-serif;border:2px solid white}.step-figure figcaption{font-size:13px;line-height:1.75;color:#536777;margin-top:10px}.shot-key{padding-left:25px;margin:8px 0}.shot-key li{margin:5px 0}.shot-zoom{font:inherit;border:1px solid #b8c9d4;background:white;color:#235f83;border-radius:7px;padding:7px 12px;cursor:pointer}.step-background{margin:28px 0;padding:20px;background:#f6f7f8;border-radius:12px}.step-background summary{cursor:pointer;font-weight:700}.shot-dialog{width:min(96vw,1500px);max-width:96vw;max-height:94vh;padding:16px;border:1px solid #bdcad3;border-radius:12px}.shot-dialog::backdrop{background:#142b3bd9}.shot-dialog .step-figure{margin:10px 0}.shot-dialog .shot-scroll{max-height:72vh;overflow:auto}.shot-dialog .shot-canvas{min-width:1100px}.shot-dialog-close{display:block;margin-left:auto;font:inherit;padding:8px 16px;cursor:pointer}.shot-dialog .shot-zoom{display:none}article a{overflow-wrap:anywhere}.step-intro{font-size:14px;color:#596b78}@media(max-width:600px){.shot-dialog{padding:10px}.shot-canvas{min-width:680px}.guided-step h3{gap:8px}.step-expect{padding:10px 12px}}

/* 材料內的純文字網址也必須在正文欄寬內換行。 */
article{overflow-wrap:anywhere}

@media(max-width:700px){.step-figure figcaption::before{content:"↔ 圖片可左右滑動，也可按下方按鈕放大。";display:block;margin-bottom:8px;color:#235f83;font-weight:600}}