/* 레슨 본문 블록 — 글 · 그림 · 표 · 요청문 · 내용 블록 · 도해 · 증상별 해결 · 비교 · 팝업 · 질문.
   토큰은 nschool.css에서 정의한다. */


/* ── 본문 — 글 · 제목 위계 · 목표 · 리드 · 문장 줄바꿈 ─────────────────────────── */
.prose .member-card h2{margin:0 0 var(--sp-2);padding:0;border:0;font-size:22px;overflow-wrap:anywhere}
.reference-dialog .step-label{margin-right:44px}
.prose .reference-dialog h2{margin:12px 44px 12px 0}
.step-label{color:var(--link);letter-spacing:.06em;font-weight:800;font-size:13px}
.prose h2,.prose .card h2,.prose .practice-step>h2{font-size:28px}
.prose .card h2{border:0;margin:12px 0}
.prose details h2,.prose details h3{font-size:20px;border:0;margin:24px 0 12px;padding:0}
.method-code{white-space:nowrap;color:var(--link);letter-spacing:.02em}
.method-desc{font-size:.68em;font-weight:600;color:var(--muted)}
.prose .method-tile img{height:auto;aspect-ratio:16/9;object-fit:cover;background:transparent}
.prose p,.prose li{max-width:none}
.prose ul.self-check{list-style:none;padding:0;margin:12px 0;border-top:1px solid var(--line-strong)}
.prose ul.self-check li{margin:0;border-bottom:1px solid var(--line)}
.prose ul.self-check.is-live label{display:flex;gap:12px;cursor:pointer;padding:var(--sp-3) var(--sp-1);min-height:48px;align-items:center}
.prose ul.self-check.is-live input{flex:none;margin-top:0;width:20px;height:20px;accent-color:var(--accent)}
.prose ul.self-check.is-live input:checked+*{color:var(--muted)}
.prose ol.case-index{list-style:none;margin:12px 0 28px;padding:0;columns:2;column-gap:24px}
.prose ol.case-index li{break-inside:avoid;padding:6px 0;border-top:1px solid var(--line)}
.prose ol.case-index a{text-decoration:none}
.prose ol.case-index .nav-num{margin-right:8px;color:var(--muted)}
.prose section.case h3{margin:6px 0 4px;font-size:22px}
.prose ol.steps{list-style:none;counter-reset:step;padding:0;margin:var(--sp-5) 0}
.prose ol.steps li{position:relative;line-height:1.7;padding:6px 0 6px 40px;border-top:0;margin:0}
.prose ol.steps li:first-child{border-top:0}
.prose ol.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--link);font:600 13px/1 var(--mono);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);top:9px;width:24px;height:24px;font-size:12px}
.prose p,.prose li,.prose figcaption,.prose td,.prose th,.prose summary{text-wrap:pretty}
.prose>.eyebrow+h2{margin-top:0;padding-top:0;border-top:0}
html:lang(ko) .step-label,html:lang(ja) .step-label{font-family:var(--font-body);letter-spacing:0}
.prose p code,.prose li code{font-size:14px;padding:1px 6px;border-radius:4px;background:var(--soft)}
.prose td code,.prose th code{font-size:13px}
.lesson-article .prose>p{margin:var(--sp-4) 0}
.prose p+p{margin-top:var(--sp-4)}
.prose li+li{margin-top:var(--sp-2)}
.prose h2+p,.prose h2+.lead{margin-top:0}
.prose h3,.prose>h3,.prose>section>h3{font-weight:700;margin:var(--sp-7) 0 var(--sp-3)}
.prose h4{font-size:var(--fs-body);line-height:1.5;font-weight:700;margin:28px 0 var(--sp-2)}
.prose>.eyebrow{margin-top:72px;padding-top:0;border-top:0;margin-bottom:var(--sp-2)}
.prose .practice-step>h2{margin:var(--sp-2) 0 var(--sp-4)}
.lesson-article .prose>p:first-child{margin:0 0 var(--sp-5);line-height:1.7;max-width:var(--reading-width);font-size:16px;background:none;border-radius:0;border-left:2px solid var(--accent);padding:0 0 0 24px;margin-bottom:32px}
.lesson-article .prose>p:first-child>strong:first-child{display:block;color:var(--link);font-size:14px;margin-bottom:8px}
.prose>p,.prose>ul,.prose>ol,.prose .lead,.prose section>p,.prose ol.steps,.prose ol.case-index{max-width:none}
.prose li{line-height:var(--lh)}
.prose ol.steps li+li{margin-top:var(--sp-2)}
.prose br.sb{content:'';display:block;margin-top:6px}
.lesson-article .prose{font-size:18px;line-height:1.75;overflow-wrap:anywhere}
.lesson-article :is(.lesson-head,.toc-inline,.ask),.lesson-article .prose>:is(p,ul,ol,section,.copy-wrap,.note,blockquote,details,.lesson-pager){max-width:var(--reading-width);margin-inline:0}
.lesson-article .prose>:is(h2,h3,h4){max-width:none;margin-inline:0}
.lesson-article .prose p,.lesson-article .prose li{line-height:1.75}
.lesson-article .prose h3{font-size:22px;line-height:1.45;margin-top:40px;margin-bottom:16px}
.lesson-article .prose h4{font-size:18px;line-height:1.5;margin-top:32px;margin-bottom:8px}
.lesson-article .prose>h3+.table-wrap{margin-top:var(--sp-4)}
.lesson-article .prose .lead{font-size:18px;color:var(--muted)}
.lesson-article .prose .practice-step>h2{margin-top:8px}
.lesson-article .prose pre{font-size:16px;line-height:1.75;padding:48px 24px 24px;border-radius:4px;background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere}
.lesson-article :is(h2,h3,h4,section[id]){scroll-margin-top:32px}
@media(max-width:800px){
  .prose h2,.prose .card h2,.prose .practice-step>h2{font-size:25px}
}
.prose h2{font-size:26px;line-height:1.35;font-weight:700;margin:72px 0 var(--sp-4);padding:0;border:0}
.lesson-article .prose h2{font-size:28px;line-height:1.4;margin-top:64px;margin-bottom:24px;padding:0;border:0}
.lesson-article .prose>h2,.lesson-article .prose>section:not(.practice-step)>h2{border-top:1px solid var(--line-strong);padding-top:var(--sp-6);margin-top:var(--sp-9)}
@media(max-width:800px){
  .prose ol.case-index{columns:1}
  .lesson-article .prose{font-size:17px}
  .lesson-article :is(h2,h3,h4,section[id]){scroll-margin-top:88px}
}
@media(max-width:600px){
  .prose h2{font-size:22px;margin-top:56px}
  .lesson-article .prose{font-size:17px}
  .lesson-article .prose .lead{font-size:17px}
  .lesson-article .prose h2{font-size:24px;margin-top:48px;margin-bottom:16px}
  .lesson-article .prose h3{font-size:20px;margin-top:32px}
  .lesson-article .prose>h2,.lesson-article .prose>section:not(.practice-step)>h2{margin-top:var(--sp-8);padding-top:var(--sp-5)}
  .lesson-article .prose>p:first-child{padding-left:16px}
  .lesson-article .prose pre{padding:48px 16px 16px;font-size:16px}
}

/* ── 그림 · 영상 · 격자 ──────────────────────────────────────────────── */
.method-tile figcaption{border-top:1px solid var(--line);margin:0;min-height:48px}
.prose img.zoomable{cursor:zoom-in}
.prose img.zoomable:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.prose .color-stages{width:min(100%,900px);margin:auto}
.prose .color-stages img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1280/704;object-fit:contain;border-radius:10px}
.prose figure.diagram svg{width:100%;height:auto;display:block;color:var(--ink)}
.prose figure.diagram{padding:12px 12px 0}
.prose .trouble-ex .grid{margin:6px 0 8px}
.prose .trouble-ex figure.teaching-media{margin:6px 0 8px}
.prose .ba-slider+.grid{margin-top:8px}
.prose section.case .grid,.prose section.case figure.teaching-media{max-width:none;margin:12px 0 18px}
.prose .teaching-media.slot{border:1.5px dashed var(--line);background:transparent;box-shadow:none;display:block}
.prose .teaching-media.slot:has(.slot-box){border:0;display:block}
body:is([data-role=admin],[data-preview="1"]) .prose .teaching-media.slot{display:block}
.prose .grid>figure.teaching-media{display:flex;flex-direction:column}
.prose .grid>figure.teaching-media.slot:has(.slot-box),body:is([data-role=admin],[data-preview="1"]) .prose .grid>figure.teaching-media.slot{display:flex}
.prose figure.teaching-media{max-width:100%;margin-inline:auto;width:100%}
.prose figure.teaching-media img{max-width:100%}
.prose figure.teaching-media>figcaption{width:0;min-width:100%}
.prose .grid figure.teaching-media>figcaption{width:auto;min-width:0}
.prose video{max-height:var(--media-max-h);border-radius:var(--r)}
.dg-video video{display:block;width:100%}
.dg-video span{display:block;color:var(--muted);line-height:1.45}
.prose .grid.three.keep{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prose .grid>figure.teaching-media>figcaption{margin-top:0}
.prose .tf-step figure.teaching-media{margin:0 auto}
.prose .tf-pair figure.teaching-media{margin:auto}
.prose details.tfix .tf-audio figure.teaching-media{margin:0;padding:10px}
.prose figure.teaching-media>img{display:block;margin-inline:auto}
.prose figure.teaching-media>video{display:block;width:100%;height:auto;max-height:var(--media-max-h);margin-inline:auto}
.prose .grid figure.teaching-media{width:auto}
.prose figure.teaching-media[style*="max-width"]{max-width:100%!important}
.prose .teaching-media{margin:var(--sp-6) 0;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
.prose figure.teaching-media>img,.prose figure.teaching-media>video{border-radius:var(--r);background:var(--soft)}
.prose .teaching-media figcaption,.prose .grid.three .teaching-media figcaption{padding:10px 0 0;line-height:1.6;color:var(--muted);font-size:15px}
.prose .grid{margin:var(--sp-6) 0}
.prose .grid .teaching-media{margin:0}
.prose .teaching-media.audio{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose .grid>figure.teaching-media>img,.prose .grid>figure.teaching-media>video{margin-block:0}
.prose .grid>figure.teaching-media>video,.prose .dg-video video{aspect-ratio:16/9;object-fit:contain;background:#000}
.prose figure.dg>.grid{margin:0}
.prose .dg-video video{margin:0;border-radius:var(--r)}
.prose .dg-video span{font-size:var(--fs-sm);margin-top:var(--sp-2);text-align:left}
.lesson-article .prose .grid{gap:24px;align-items:start}
.lesson-article .prose figure.teaching-media{margin-block:32px}
.lesson-article .prose .grid>figure.teaching-media{margin-block:0}
.lesson-article .prose figure.teaching-media>img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:4px}
.lesson-article .prose :is(.teaching-media,figure.dg) figcaption{font-size:14px;line-height:1.7;color:var(--muted);padding:16px 0 0;text-align:left}
@media(max-width:600px){
  .lesson-article .prose :is(.grid.two,.grid.three,.dg-strip){grid-template-columns:1fr}
}

/* ── 표 ─────────────────────────────────────────────────────────── */
.table-wrap small{overflow-wrap:anywhere}
.prose .table-wrap{margin:var(--sp-6) 0;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;box-shadow:none}
.prose .table-wrap table{line-height:1.6;border-collapse:collapse}
.prose .table-wrap th{padding:var(--sp-3) var(--sp-4);background:transparent;color:var(--muted);font-weight:700;letter-spacing:.01em;border-bottom:1px solid var(--line-strong);vertical-align:bottom;font-size:14px}
.prose .table-wrap td{padding:14px var(--sp-4);border-bottom:1px solid var(--line);vertical-align:top}
.prose .table-wrap th:first-child,.prose .table-wrap td:first-child{padding-left:0}
.prose .table-wrap th:last-child,.prose .table-wrap td:last-child{padding-right:0}
.prose .table-wrap tr:last-child td{border-bottom:0}
.prose .table-wrap tr:hover td{background:transparent}
.prose .table-wrap tbody tr:hover{background:var(--hover)}
.prose .table-wrap td code{font-size:13px}
.prose .table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.prose .table-wrap table,.prose .table-wrap td{font-size:16px}
.lesson-article .prose .table-wrap{max-width:100%;width:100%;overflow:auto;overscroll-behavior-x:contain;box-shadow:none;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-radius:0;background:none;margin-block:32px}
.lesson-article .prose .grid>.table-wrap{grid-column:1 / -1;width:100%;margin-block:0}
.lesson-article .prose .table-wrap table{min-width:600px;width:100%;border-collapse:collapse;font-size:16px}
.lesson-article .prose .tf-step .table-wrap table{min-width:0;width:100%}
.lesson-article .prose .table-wrap :is(th,td){min-width:0}
.lesson-article .prose .table-wrap th{background:var(--surface);font-size:14px;font-weight:600;color:var(--muted);text-align:left;letter-spacing:0;padding:16px;border-bottom:1px solid var(--line-strong)}
.lesson-article .prose .table-wrap td{padding:16px;font-size:16px;line-height:1.7;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.lesson-article .prose .table-wrap tr:last-child td{border-bottom:0}
.lesson-article .prose .table-wrap::after,.lesson-article .prose .table-wrap:has(table)::before{display:none}
.lesson-article .prose .table-wrap.has-more{-webkit-mask-image:none;mask-image:none}
.table-scroll-hint{font-size:13px!important;color:var(--muted);margin:8px 0!important}
.table-scroll-hint[hidden]{display:none}
@media(max-width:600px){
  .prose .table-wrap table{min-width:560px}
  .prose .table-wrap{overflow-x:auto;position:relative;background:linear-gradient(to left,var(--bg),transparent 24px) right/24px 100% no-repeat local,linear-gradient(to left,#0006,transparent) right/14px 100% no-repeat scroll}
  .prose .table-wrap:has(table)::before{content:attr(data-scroll-hint);display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
  .lesson-article .prose .table-wrap td{padding:16px 12px}
}
@media(max-width:560px){
  .prose .table-wrap th,.prose .table-wrap td{min-width:0;overflow-wrap:break-word}
  :lang(ja) .prose .table-wrap th,:lang(ja) .prose .table-wrap td{word-break:normal}
  .prose .table-wrap.has-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
}

/* ── 요청문 · 코드 블록 ───────────────────────────────────────────────── */
.prose section.case pre{margin:6px 0 14px}
.prose .tf-step pre{margin:0}
.prose pre,.prose pre code{font-size:14px}
.prose pre{border:1px solid var(--line)}
.prose pre,.prose pre code.language-text{font-family:var(--font-body)}
.copy-wrap .copy-button{padding:0 var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600}
.lesson-article .prose .copy-wrap{margin-block:24px}
.lesson-article .prose .copy-button{top:0;right:8px;min-width:48px;min-height:44px;background:none;border:0;color:var(--link)}

/* ── 내용 블록 — 노트 · 접기 · 실습 · 단계 · 자가 점검 · 사례 · 출처 ───────────────── */
.prose details{font-size:15px;margin:var(--sp-5) 0;padding:0 var(--sp-5);background:transparent;border:1px solid var(--line);border-radius:var(--r)}
.prose .learning-aside{margin-top:28px;background:transparent;border:1px solid var(--line);padding:0 var(--sp-5)}
.prose .learning-aside>summary{color:var(--ink)}
.prose details details{margin:20px 0 4px 8px;background:transparent;border:0;border-left:2px solid var(--line);padding:0 0 0 var(--sp-4)}
.prose details details>summary{font-size:15px;color:var(--muted);padding:8px 0}
.prose details details>summary::before{content:'보충 · ';color:var(--link);font-weight:800;font-size:12px;letter-spacing:.06em}
.prose details details[open]>summary{border-bottom:0;margin-bottom:8px}
.prose details details p,.prose details details li{color:var(--muted)}
.prose .process-title{font-size:17px;font-weight:700;margin:0 0 8px}
.prose details>summary{display:flex;align-items:center;justify-content:flex-start;gap:8px;list-style:none;min-height:48px;padding:var(--sp-3) 0;font-weight:700}
.prose details>summary::-webkit-details-marker{display:none}
.prose details>summary::after{content:'펼치기';flex:none;margin-left:auto;font-size:12px;letter-spacing:.04em;border-radius:999px;line-height:1;transition:background .15s,color .15s;border:1px solid var(--line-strong);color:var(--muted);font-weight:600;padding:5px 12px}
.prose details[open]>summary::after{content:'접기'}
.prose details details>summary::after{font-size:11px;padding:4px 11px}
.prose details.trouble{margin:8px 0;padding:0 var(--sp-5);border:1px solid var(--line);border-left:2px solid var(--line-strong)}
.prose details.trouble>summary{font-size:17px;font-weight:700;padding:14px 0;line-height:1.4}
.prose details.trouble[open]>summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.prose details.trouble:not(.tfix)>p{display:grid;grid-template-columns:52px 1fr;gap:0 14px;align-items:baseline;font-size:15px;line-height:1.7;margin:0 0 10px;padding:0}
.prose details.trouble:not(.tfix)>p>strong{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:2px 0;border-radius:4px}
.prose details.trouble:not(.tfix)>p:last-child>strong{color:var(--link)}
.prose details.trouble:not(.tfix)>p:last-child{background:var(--soft);padding:10px 12px;border-radius:8px;margin:2px -12px 16px}
.prose section.case{margin:0 0 8px;padding:22px 0 14px;border-top:1px solid var(--line)}
.prose section.case .case-lead{color:var(--muted);margin:0 0 14px}
.prose section.case p{margin:8px 0 4px}
.prose section.case ol.steps{margin:6px 0 14px}
.prose .case-ex{margin:14px 0 18px;border:0;border-left:2px solid var(--line-strong);border-radius:0;padding:var(--sp-2) 0 var(--sp-1) var(--sp-5)}
.prose .case-ex.case-bad{border-left-color:#e0a030}
.prose .case-ex.case-ok{border-left-color:var(--link)}
.prose .case-ex-label{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--muted);margin:10px 0 6px}
.prose .case-ex.case-bad .case-ex-label{color:#e0a030}
.prose .case-ex.case-ok .case-ex-label{color:var(--link)}
.prose .case-ex ul{margin:0 0 10px}
.prose .source-note{margin-top:40px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted);max-width:none}
.prose .service-links{display:flex;flex-wrap:wrap;gap:8px 10px}
.prose .service-links a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;text-decoration:none;color:var(--link);background:var(--surface)}
.prose .service-links a:hover{border-color:var(--link)}
html[lang=en] .prose details>summary::after{content:'Expand'}
html[lang=en] .prose details[open]>summary::after{content:'Collapse'}
html[lang=en] .prose details details>summary::before{content:'Note · '}
html[lang=ja] .prose details>summary::after{content:'開く'}
html[lang=ja] .prose details[open]>summary::after{content:'閉じる'}
html[lang=ja] .prose details details>summary::before{content:'補足 · '}
.prose .note.pending{display:none}
body[data-role=admin] .prose .note.pending{display:block}
.prose section.case h3 .case-up{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;margin-left:10px;white-space:nowrap;vertical-align:middle}
.prose section.case h3 .case-up:hover{color:var(--link)}
.prose details.tfix .tf{display:grid;gap:14px;margin:6px 0 16px}
.prose details.tfix p:not(.tf-diff-row){display:block;font-size:15px;line-height:1.7;padding:0;margin:0 0 8px;background:none;word-break:keep-all}
.prose details.tfix .tf-step>p:last-child{margin-bottom:0;background:none;padding:0}
.prose details.tfix p.tf-diff-row{display:grid;grid-template-columns:72px 1fr;gap:10px;margin:0;padding:0;background:none}
.prose details.tfix .tf-audio{margin:0}
.prose details.tfix .tf-audio audio{width:100%}
.prose details.tfix video.tf-clip{display:block;width:100%;margin-top:6px;border-radius:8px}
html:lang(ko) .source-note,html:lang(ja) .source-note{font-family:var(--font-body);letter-spacing:0}
.prose details.learning-aside>summary{font-size:17px}
.prose .note,.prose blockquote{margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);background:var(--accent-soft);border:0;border-left:2px solid var(--accent);border-radius:0 var(--r) var(--r) 0;line-height:1.7;font-size:var(--fs-md)}
.prose .note.warm{background:color-mix(in srgb,#e0a030 10%,transparent);border-left-color:#e0a030}
.prose details[open]>summary{border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)}
.prose details>summary:hover::after,.prose details>summary:focus-visible::after{background:transparent;color:var(--ink);border-color:var(--accent)}
.prose details.trouble[open]{border-left-color:var(--accent)}
.practice-step{margin:var(--sp-8) 0}
.self-check-status{font:600 13px/1.5 var(--mono);color:var(--link)}
.prose .practice-step>p,.prose .practice-step>ol,.prose .practice-step>ul,.prose section.case p,.prose section.case ul,.prose .case-ex p,.prose .note{max-width:none}
.step-goal{border-radius:0;margin:0 0 var(--sp-5);font-weight:700;color:var(--ink)}
.lesson-article .prose :is(.note,blockquote){padding:16px 24px;background:var(--surface);border:0;border-left:2px solid var(--line-strong);border-radius:0;font-size:16px}
.lesson-article .prose .note.warn{border-left-color:#e0a030}
.lesson-article .prose .practice-step{padding:0 0 0 24px;border:0;border-left:2px solid var(--accent);border-radius:0;background:none;margin-block:48px}
.lesson-article .prose .step-goal{font-size:18px;background:none;padding:0}
.lesson-article .prose details{font-size:16px;border-radius:4px}
.lesson-article .prose details details :is(p,li){font-size:16px}
@media(max-width:800px){
  .prose details.trouble:not(.tfix)>p{grid-template-columns:44px 1fr;gap:0 10px;font-size:14px}
}
@media(max-width:600px){
  .prose details,.prose .learning-aside,.prose details.trouble{padding:0 var(--sp-4)}
  .lesson-article .prose .practice-step{padding-left:16px}
  .lesson-article .prose :is(.note,blockquote){padding:16px}
}

/* ── 도해(dg) — tools/lesson_kit.py 가 만드는 그림 부품 ──────────────────── */
.dg-thumb{display:flex;align-items:center;justify-content:center;height:64px;border-radius:8px;overflow:hidden;background:var(--soft);border:1px solid var(--line);color:var(--link);font-weight:800;font-size:14px}
.prose .dg-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.dg-thumb.multi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.dg-thumb svg{width:80%}
.dg-mini-tl{width:84%;display:flex;gap:2px}
.dg-mini-tl i{height:15px;background:var(--link);opacity:.75;border-radius:2px}
.dg-chip{display:inline-block;border:1px solid var(--line);background:var(--soft);border-radius:6px;padding:1px 7px;font-size:13px;color:var(--ink)}
.dg-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr))}
.dg-rail li{position:relative;text-align:center;padding:0 4px;margin:0}
.dg-rail li::before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:var(--line)}
.dg-rail li:first-child::before{left:50%}
.dg-rail li:last-child::before{right:50%}
.dg-no{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 auto 8px;border-radius:50%;background:var(--sky);color:var(--on-sky);font-weight:800;font-size:13px}
.dg-rail b{display:block;margin-top:7px;line-height:1.3}
.dg-rail small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.dg-gate{display:inline-block;margin-top:6px;font-weight:700;line-height:1.35;color:var(--link);border:1px solid var(--link);border-radius:10px;padding:1px 7px}
.dg-bars{display:grid;gap:14px}
.dg-bar-row{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center}
.dg-bar-what{display:flex;gap:10px;align-items:center;font-size:15px}
.dg-bar-what .dg-thumb{width:60px;height:40px;flex:none}
.dg-bar{display:flex;align-items:center;gap:10px;min-width:0}
.dg-bar>i{display:block;height:26px;border-radius:5px;flex:none;max-width:70%;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.dg-bar>span{font-size:14px;white-space:nowrap}
.dg-bar em{font-style:normal;color:var(--muted)}
.dg-tree{display:grid;gap:8px}
.dg-tree-row{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}
.prose .dg-tree-row>code{background:none;padding:0;font-size:14px;white-space:normal;overflow-wrap:anywhere}
.dg-files{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.prose .dg-files img{width:52px;height:32px;object-fit:cover;border-radius:4px;margin:0}
.prose .dg-tree-row.rej img{opacity:.45;filter:grayscale(1)}
.dg-tree-row.rej .dg-x{color:var(--danger,#b4443a);font-weight:800}
.dg-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dg-pick{border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--soft)}
.dg-pick.on{border-color:var(--link)}
.prose .dg-pick img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:0}
.dg-pick:not(.on) img{opacity:.55}
.dg-pick>span{display:block;padding:7px 9px;font-size:13px;line-height:1.4;color:var(--muted)}
.dg-pick.on>span{color:var(--ink);font-weight:700}
.dg-stairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;height:220px}
.dg-stair{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.dg-stair-bar{display:block;width:100%;margin-bottom:8px;opacity:1;background:color-mix(in srgb,var(--accent) 22%,transparent);border-top:2px solid var(--accent);border-radius:2px 2px 0 0}
.dg-stair b{font-size:14px;line-height:1.3}
.dg-stair small{font-size:12.5px;color:var(--muted);line-height:1.35}
.dg-backs{display:grid;gap:10px}
.dg-back{display:grid;grid-template-columns:minmax(0,1.4fr) 24px 88px minmax(0,1fr);gap:10px;align-items:center}
.dg-sym{background:var(--soft);border-radius:8px;padding:8px 12px;font-size:14px}
.dg-arr{color:var(--link);font-weight:800;font-size:18px;text-align:center}
.dg-back .dg-thumb{height:50px}
.dg-back b{font-size:14px}
.dg-gantt{display:grid;gap:5px;font-size:13px}
.dg-gantt-row{display:grid;grid-template-columns:110px repeat(var(--days),minmax(0,1fr));gap:3px;align-items:center}
.dg-gantt-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-gantt-row>i{display:block;height:18px;border-radius:4px;background:var(--link);opacity:.8}
.dg-gantt-row.head em{font-style:normal;color:var(--muted);font-size:12px;text-align:center}
.dg-record{display:grid;gap:12px}
.dg-rec{display:grid;grid-template-columns:minmax(0,1fr) 24px 220px;gap:12px;align-items:center}
.dg-rec-line{font-size:13.5px;background:var(--soft);border-radius:8px;padding:10px 12px;font-family:var(--mono);line-height:1.5;overflow-wrap:anywhere}
.dg-rec-out{border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--soft)}
.dg-rec.on .dg-rec-out{border-color:var(--link)}
.prose .dg-rec-out img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:0}
.dg-rec-out>span{display:block;padding:6px 9px;font-size:13px;color:var(--muted)}
.dg-rec.on .dg-rec-out>span{color:var(--ink);font-weight:700}
.dg-cards{display:grid}
.dg-card{display:flex;flex-direction:column}
.dg-card b{line-height:1.35}
.dg-card small{color:var(--muted)}
.dg-glyph{font-size:28px}
.dg-eq{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap}
.dg-eq-part{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:1 1 0;width:auto;min-width:150px;max-width:520px}
.dg-eq-part .dg-thumb{width:100%}
.dg-eq-part b{line-height:1.35}
.dg-eq-op{font-size:28px;font-weight:800;color:var(--link)}
.dg-thumb.txt{padding:10px;font-size:13px;font-weight:600;line-height:1.45;color:var(--ink);text-align:left;align-items:flex-start;justify-content:flex-start;overflow:hidden}
.dg-anat{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.dg-seg{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:8px;border-top:4px solid}
.prose .dg-seg code{background:none;padding:0;font-size:17px;font-weight:700}
.dg-seg small{color:var(--muted);white-space:nowrap}
.dg-seg.s0{border-color:#5aa9e6;background:color-mix(in srgb,#5aa9e6 14%,transparent)}
.dg-seg.s1{border-color:#e6a23c;background:color-mix(in srgb,#e6a23c 14%,transparent)}
.dg-seg.s2{border-color:#3fb37f;background:color-mix(in srgb,#3fb37f 14%,transparent)}
.dg-seg.s3{border-color:#c47ad6;background:color-mix(in srgb,#c47ad6 14%,transparent)}
.dg-seg.s4{border-color:#d9676b;background:color-mix(in srgb,#d9676b 14%,transparent)}
.dg-strip{display:grid}
.prose .dg-strip-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:6px}
.dg-strip-item i{display:block;height:14px;border-radius:4px;margin-top:5px}
.dg-strip-item span{display:block;color:var(--muted)}
.dg-annot{position:relative;max-width:760px;margin:0 auto 18px}
.prose .dg-annot img{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:8px}
.dg-box{position:absolute;border:3px solid;border-radius:8px}
.dg-box em{position:absolute;left:-3px;bottom:100%;margin-bottom:4px;font-style:normal;font-weight:800;padding:2px 7px;border-radius:5px;color:#fff;width:max-content;max-width:min(260px,70vw);white-space:normal;line-height:1.35}
.dg-box.move{border-color:#3fb37f}
.dg-box.move em{background:#1f7a52}
.dg-box.keep{border-color:#5aa9e6;border-style:dashed}
.dg-box.keep em{background:#2b6aa0}
.dg-box.bad{border-color:#e05b5b}
.dg-box.bad em{background:#b33a3a}
.dg-box.below em{bottom:auto;top:100%;margin:4px 0 0}
.dg-chat{display:grid;gap:8px;justify-items:center}
.dg-bubble{max-width:560px;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--sky);color:var(--on-sky);font-size:14px;line-height:1.6;justify-self:end}
.dg-reply{width:100%;display:grid;gap:2px;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.dg-reply>span{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.dg-reply b,.dg-reply i{font-style:normal;padding:5px 7px;border-right:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-reply .head{background:var(--soft)}
.dg-reply b{font-weight:700}
.dg-sheet{display:grid;font-size:12.5px;border:1px solid var(--line);border-radius:8px;overflow-x:auto;background:var(--bg)}
.dg-sheet .row{display:grid;grid-template-columns:30px repeat(var(--n),minmax(90px,1fr))}
.dg-sheet em,.dg-sheet b,.dg-sheet i{font-style:normal;padding:4px 7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-sheet em{background:var(--soft);color:var(--muted);text-align:center}
.dg-sheet b{font-weight:700}
.dg-sheet .cols em{text-align:center}
.dg-formats{display:flex;gap:16px;justify-content:center;flex-wrap:nowrap;align-items:flex-start;max-width:calc(var(--sumar,3) * 380px);margin-inline:auto}
.dg-fmt{display:flex;flex-direction:column;align-items:center;gap:6px;flex:var(--ar,1) 1 0;min-width:0}
.dg-fmt>span{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line);height:auto;width:100%}
.prose .dg-fmt img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-height:none;border-radius:0}
.dg-fmt b{font-size:14px}
.dg-dash{align-self:center;font-weight:800;color:var(--muted);font-size:18px}
.dg-box.r em{left:auto;right:-3px}
.prose .dg-svg{display:block;width:100%;max-width:none;height:auto;margin:0;color:var(--ink)}
.dg--gamut .dg-svg{max-width:720px}
.dg-annot-sm{max-width:420px;margin-top:18px}
.dg-strip+.dg-strip{margin-top:12px}
.dg-eq+.dg-eq{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.dg-eq-pair .dg-eq-part .dg-thumb{height:auto}
.dg-tag{display:inline-block;margin:0 0 12px;padding:2px 10px;border-radius:999px;border:1px dashed var(--muted);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em}
.dg-mini-log{display:grid;gap:2px;width:88%;font:600 10.5px/1.35 var(--mono);color:var(--ink)}
.dg-mini-log .r{display:grid;grid-template-columns:28px 1fr 14px;gap:6px;align-items:center;padding:2px 6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dg-mini-log i{font-style:normal;color:var(--muted)}
.dg-mini-log span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-mini-log em{font-style:normal;text-align:center}
.dg-mini-log em.ok{color:var(--link)}
.dg-mini-log em.no{color:var(--danger,#c4372c)}
.dg-rail .dg-mini-log .r{grid-template-columns:22px 1fr 10px;gap:3px;padding:1px 3px}
.prose .dg-mini-log,.prose .dg-mini-log *{font-size:10.5px;line-height:1.4;font-weight:600}
.prose .dg-rail .dg-mini-log,.prose .dg-rail .dg-mini-log *{font-size:8.5px}
.prose .dg-thumb.fit img{background:#1d2228}
.dg-wide+.dg-wide{margin-top:12px}
.prose .dg-wide img{display:block;width:100%;height:auto;margin:0;border-radius:6px}
.dg-wide span{display:block;line-height:1.35;color:var(--muted);margin-top:5px;text-align:center}
.dg-stairs-head{margin:0 0 14px;font-size:19px;font-weight:800;color:var(--ink)}
.dg-stair-mult{display:block;font-size:20px;font-weight:800;color:var(--link);margin-bottom:4px}
.dg-warn{display:flex;gap:16px;align-items:center;margin-top:16px;padding:14px 16px;border-radius:12px;border:2px solid #e8a33d;background:rgba(232,163,61,.08)}
.dg-warn .dg-thumb{flex:none}
.dg-warn b{display:block;font-size:17px;color:#e8a33d;margin-bottom:4px}
.dg-warn p{margin:0;font-size:15px}
.dg-card .dg-thumb,.dg-rail .dg-thumb,.dg-eq-part .dg-thumb{height:auto;aspect-ratio:16/9}
.dg-card .dg-thumb:has(>img:only-child),.dg-rail .dg-thumb:has(>img:only-child),.dg-eq-part .dg-thumb:has(>img:only-child){aspect-ratio:auto;background:transparent}
.prose .dg-card .dg-thumb>img:only-child,.prose .dg-rail .dg-thumb>img:only-child,.prose .dg-eq-part .dg-thumb>img:only-child{height:auto;object-fit:contain;max-height:260px;width:auto;max-width:100%;margin-inline:auto}
.dg-card .dg-thumb.multi,.dg-rail .dg-thumb.multi,.dg-eq-part .dg-thumb.multi{aspect-ratio:auto;align-content:start}
.prose .dg-thumb.multi img{height:auto;aspect-ratio:16/9}
.dg-eq-pair .dg-eq-part{width:auto;max-width:none}
.dg-warn .dg-thumb:has(>img:only-child){aspect-ratio:auto;height:auto;width:min(360px,100%)}
.prose .dg-warn .dg-thumb>img:only-child{height:auto;object-fit:contain}
.dg-badge{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;border:1px solid #e0a030;color:#e0a030;font-weight:700;line-height:1.5}
.dg-badge-line{margin:8px 0 6px}
.prose .dg-thumb.multi.stack{display:block;position:relative;aspect-ratio:16/9;height:auto;background:transparent;border:0;overflow:visible;border-radius:0}
.prose .dg-thumb.multi.stack>img{display:none;position:absolute;width:calc(100% - 10px);height:calc(100% - 10px);aspect-ratio:auto;object-fit:cover;border-radius:7px;border:1px solid var(--line);box-shadow:0 1px 4px #0006;margin:0}
.prose .dg-thumb.multi.stack>img:nth-child(1){display:block;right:0;bottom:0;z-index:3}
.prose .dg-thumb.multi.stack>img:nth-child(2){display:block;right:5px;bottom:5px;z-index:2;filter:brightness(.55);pointer-events:none}
.prose .dg-thumb.multi.stack>img:nth-child(3){display:block;right:10px;bottom:10px;z-index:1;filter:brightness(.35);pointer-events:none}
.dg-stack-n{position:absolute;right:6px;bottom:6px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:#000b;color:#fff;font-size:12px;font-weight:700;line-height:1.4;pointer-events:none}
.dg-eq .dg-eq-part:has(>.dg-thumb.multi.stack){flex:1 1 0!important;width:auto;min-width:0!important}
.prose figure.dg.dg--cards{border:0;background:none;padding:0}
.prose figure.dg.dg--cards figcaption{margin-top:12px}
.prose .dg-badge,.prose .dg-seg small,.prose .dg-box em,.prose .dg-strip-item span,.prose .dg-wide span,.prose .dg-gate{font-size:12px}
.prose .dg-eq-part b,.prose .dg-card b,.prose .dg-rail b{font-size:15px}
.prose figure.dg{margin:var(--sp-7) 0;padding:0;border:0;border-radius:0;background:none}
.prose figure.dg>figcaption,.prose figure.dg figcaption{margin:0}
.prose .dg-cards{align-items:stretch}
.prose .dg-card{padding:14px 16px;border:1px solid var(--line-strong);border-top:3px solid var(--link);border-radius:12px;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.14);gap:8px;justify-content:flex-start}
.prose .dg-card:has(>.dg-seg){padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.prose .dg-card>.dg-seg{width:100%;height:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line);border-top-width:4px;justify-content:flex-start}
.prose .dg-card .dg-thumb,.prose .dg-card .dg-thumb:has(>img:only-child){aspect-ratio:16/9;height:auto;border-radius:8px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.prose .dg-card .dg-thumb>img:only-child{width:100%;height:100%;max-height:none;object-fit:cover}
.prose .dg-card .dg-thumb:not(:has(>img)),.prose .dg-rail .dg-thumb.txt,.prose .dg-eq-part .dg-thumb.txt{aspect-ratio:auto;min-height:56px;height:auto;padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--link) 10%,var(--soft));border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);font-size:14px;font-weight:700;line-height:1.45}
.prose .dg-card b{font-size:16px;margin-top:2px;color:var(--ink)}
.prose .dg-card small{font-size:13.5px;line-height:1.55;color:var(--muted)}
.lesson-article .prose .dg-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}
.lesson-article .prose .dg-strip-item span{font-size:14px;line-height:1.6;text-align:left;margin-top:8px}
.lesson-article .prose .dg-cards{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
@media(max-width:800px){
  .dg-rail{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:20px}
  .dg-rail li:nth-child(4)::before{right:50%}
  .dg-rail li:nth-child(5)::before{left:50%}
  .dg-bar-row{grid-template-columns:1fr}
  .dg-tree-row{grid-template-columns:1fr;gap:4px}
  .dg-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-stairs{height:200px;gap:6px}
  .dg-back{grid-template-columns:1fr 24px 72px}
  .dg-back b{grid-column:2 / -1}
  .dg-rec{grid-template-columns:1fr}
  .dg-rec .dg-arr{display:none}
  .dg-gantt-row{grid-template-columns:76px repeat(var(--days),minmax(0,1fr))}
  .dg-reply{overflow-x:auto}
  .dg-reply>span{min-width:560px}
  .dg-bar>span{white-space:normal;min-width:0}
  .dg-bar>i{max-width:55%}
  .dg-eq-pair .dg-eq-op{font-size:16px}
  .dg-eq{flex-wrap:wrap}
  .dg-eq-op{font-size:16px}
  .dg-warn{flex-direction:column;align-items:flex-start}
  .dg-eq .dg-eq-part:has(>.dg-thumb.multi.stack){flex:0 0 44%!important}
  .lesson-article .prose .dg-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .dg-formats{gap:6px}
  .dg-fmt b{font-size:11px;text-align:center}
  .dg-eq-part{min-width:120px}
}

/* ── 증상별 해결(trouble · tfix) ────────────────────────────────────── */
.prose .trouble-ex{margin:6px 0 14px}
.prose .tf-label{font-weight:800;letter-spacing:.02em;color:var(--muted)}
.prose .tf-label span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--ink);font-size:13px}
.prose .tf-diff{display:grid;gap:6px}
.prose .tf-diff-row b{color:var(--muted);font-size:12px}
.prose .tf-diff-row code{white-space:pre-wrap;padding:6px 10px;border-radius:6px;font-size:14px}
.prose .tf-before code{background:rgba(224,160,48,.12);text-decoration:line-through;text-decoration-color:rgba(224,160,48,.7)}
.prose .tf-after code{background:rgba(110,220,180,.14)}
.prose .tf-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.prose .tf-pair>.tf-step{display:flex;flex-direction:column}
.prose .tf-pair>.tf-step:first-child .tf-label{color:#e0a030}
.prose .tf-pair>.tf-step:last-child .tf-label{color:var(--link)}
.prose .tf>.tf-step:nth-child(n){border-left:1px solid var(--line)}
.prose .tf>.tf-step .tf-label{color:var(--muted)}
.prose .tf-pair.tf-pair-wide,.prose .tf-pair:has(table){grid-template-columns:1fr}
.prose .tf-step{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:12px 0 0}
.prose .tf-pair>.tf-step,.prose .tf-pair>.tf-step:first-child,.prose .tf-pair>.tf-step:last-child{border-top:0;border-left:0;padding:0}
@media(max-width:700px){
  .prose .tf-pair{grid-template-columns:minmax(0,1fr)}
}

/* ── 전 · 후 비교 슬라이더 ─────────────────────────────────────────────── */
.ba-slider{margin:20px 0 6px}
.ba-frame{position:relative;overflow:hidden;background:var(--soft);aspect-ratio:16/9;cursor:ew-resize;user-select:none;border-radius:var(--r);touch-action:pan-y}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0;margin:0;pointer-events:none;cursor:inherit}
.ba-after-wrap{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px #0006;transform:translateX(-1px)}
.ba-handle::after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#fff;display:grid;place-items:center;content:'\2039\00a0\203A';width:34px;height:34px;font:700 16px/1 var(--font-en);color:#123;box-shadow:0 1px 6px #0007}
.ba-tag{position:absolute;bottom:10px;padding:4px 10px;font-weight:700;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;font-size:var(--fs-xs);background:#12191e;color:#fff}
.ba-tag-before{right:10px}
.ba-tag-after{left:10px}
.ba-control{display:flex;align-items:center;gap:12px;color:var(--muted);margin-top:8px;font-size:13px}
.ba-control input{flex:1;accent-color:var(--accent);min-height:44px}

/* ── 팝업 — 참조 요약 · 이미지 크게 보기 ────────────────────────────────────── */
.reference-dialog{border-radius:var(--r)!important;width:min(640px,calc(100vw - 32px));max-height:85vh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:26px}
.lesson-reference{display:inline;color:var(--link);font:inherit;background:none;border:0;border-bottom:1px dotted currentColor;padding:0 2px;text-align:left;cursor:pointer}
.reference-dialog::backdrop{background:var(--backdrop,#07111bc9)}
.dialog-close{position:absolute;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;padding:0}
.dialog-close:hover{background:var(--soft)}
.reference-open{overflow:hidden}
.lightbox{width:auto;max-width:calc(100vw - 32px);padding:0;border:0;background:var(--surface);color:var(--ink);border-radius:var(--r);max-height:calc(100dvh - 32px);overflow:auto}
.lightbox::backdrop{background:var(--backdrop,#07111bd9)}
.lightbox figure{margin:0;display:flex;flex-direction:column;max-width:100%;width:100%;align-items:center}
.lightbox img{display:block;max-width:calc(100vw - 32px);max-height:calc(100vh - 92px);width:auto;height:auto;object-fit:contain;background:#000;cursor:zoom-out;margin:0 auto}
.lightbox figcaption{color:var(--muted);width:auto;min-width:0;align-self:stretch;text-align:left;padding:16px 24px;font-size:14px;line-height:1.6}
.lightbox .lightbox-close{position:absolute;top:10px;right:10px;background:var(--surface);opacity:.92}
.reference-dialog .reference-go{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.reference-dialog .reference-go a{font-weight:700}
.lightbox .dialog-close{width:44px;height:44px}
.lightbox-fullscreen{position:absolute;top:10px;right:62px;min-width:44px;height:44px;border:1px solid var(--field-line);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;font:600 13px var(--font-body);padding:0 12px}
.lightbox-stage{position:relative;background:var(--surface);color:var(--ink)}
.lightbox-stage:fullscreen{max-width:none;max-height:none;width:100vw;height:100dvh;display:grid;place-items:center}
.lightbox-stage:fullscreen figure{max-height:100dvh}
.lightbox-stage:fullscreen img{max-height:calc(100dvh - 112px)}
@media(max-width:800px){
  .reference-dialog{padding:20px}
}
@media print{
  .reference-dialog{display:none}
  .lightbox{display:none}
}

/* ── 질문 영역 ─────────────────────────────────────────────────────── */
.ask-head{display:grid;gap:6px;margin:0 0 16px}
.ask-head h2{line-height:1.3;margin:0;padding:0;border:0;letter-spacing:-.01em;font-size:var(--fs-xl)}
.ask-head p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:80ch}
.ask-form{display:grid;gap:12px;padding:8px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r)}
.ask-field textarea{display:block;width:100%;box-sizing:border-box;min-height:120px;resize:vertical;padding:14px 16px;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.ask-field textarea::placeholder{color:var(--muted);opacity:.8}
.ask-field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.ask-field textarea:disabled,.ask-field textarea[aria-disabled="true"]{opacity:.5;cursor:not-allowed;background:var(--soft,rgba(255,255,255,.04))}
.ask-foot{display:flex;align-items:center;gap:14px;padding:2px 6px 4px 8px;flex-wrap:wrap}
.ask-meta{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.ask-meta span{color:var(--ink);font-family:var(--mono);font-size:12px}
.ask-status{margin:0;font-size:13px;color:var(--link);flex:1 1 auto}
.ask-send{margin-left:auto;display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:800;letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .45s cubic-bezier(.32,.72,0,1),filter .3s}
.ask-send-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:color-mix(in srgb,var(--on-sky) 14%,transparent);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.ask-send:hover{filter:brightness(1.05)}
.ask-send:hover .ask-send-ico{transform:translateX(2px)}
.ask-send:active{transform:scale(.98)}
.ask-send:disabled,.ask-send[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.ask-guest{padding:14px 8px 14px 16px;border:1px dashed var(--line);border-radius:14px}
[data-theme=paper] .ask-send-ico{background:#ffffff22}
.ask-attach{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.ask-attach.is-disabled,.ask-attach:has(input:disabled){opacity:.5;cursor:not-allowed;pointer-events:none}
.ask-attach.is-disabled .ask-attach-btn,.ask-attach:has(input:disabled) .ask-attach-btn{cursor:not-allowed}
.ask-attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ask-attach-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);background:transparent;transition:background .3s;flex-shrink:0;white-space:nowrap}
.ask-attach:hover .ask-attach-btn{background:var(--soft)}
.ask-attach input:focus-visible+.ask-attach-btn{outline:2px solid var(--sky);outline-offset:2px}
.ask-files{font-size:12px;color:var(--muted);font-family:var(--mono);max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-files.is-rule{font-family:inherit;max-width:none;white-space:normal}
.ask-form.is-drop{border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.ask-reply{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ask-reply label{flex:none;font-size:14px;color:var(--muted)}
.ask-reply input{flex:1;min-width:0;box-sizing:border-box;padding:10px 14px;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line)}
.ask-reply input::placeholder{color:var(--muted);opacity:.8}
.ask-reply input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.ask-field textarea,.ask-reply input{border-radius:6px;border-color:var(--field-line)}
.ask{margin:var(--sp-9) 0 0;padding-top:var(--sp-6);border-top:1px solid var(--line)}
.ask-send,[data-theme=paper] .ask-send{background:var(--accent);color:var(--on-accent);min-height:44px}
@media(max-width:800px){
  .ask-form{padding:6px}
  .ask-foot{flex-direction:column;align-items:stretch;gap:10px;padding:4px 4px 6px}
  .ask-send{margin-left:0;justify-content:space-between}
  .ask-status{order:3}
  .ask-attach{justify-content:space-between}
}
@media(max-width:560px){
  .ask-reply{flex-direction:column;align-items:stretch;gap:6px}
}
@media print{
  .ask{display:none}
}
/* 캡션 줄바꿈 및 좁은 도해 정렬 */
.prose figcaption,.prose .dg-strip-item span,.prose .dg-video span,.prose .dg-wide span{text-wrap:wrap}
.prose figure.dg:has(> .dg-annot, > .dg-formats){width:fit-content;max-width:100%}
.prose figure.dg:has(> .dg-annot, > .dg-formats)>figcaption{width:0;min-width:100%}
.prose figure.dg>.dg-annot,.prose figure.dg>.dg-svg,.prose figure.dg>.dg-formats{margin-inline:0}
/* 언어별 줄바꿈 규칙 */
html:lang(ja) body{word-break:normal;line-break:strict;overflow-wrap:break-word}
html:lang(en) body{word-break:normal;overflow-wrap:break-word}
html:lang(ja) :is(h1,h2,h3,.prose summary){word-break:auto-phrase}
/* 기록 표(operations) 열 정렬 */
.lesson-article .prose .log-table :is(td:first-child,td:nth-child(2),td:last-child,td.log-files),.lesson-article .prose .log-table td code{white-space:nowrap;overflow-wrap:normal}
.lesson-article .prose .log-table :is(th,td):is(:first-child,:last-child){width:1%}
.lesson-article .prose .log-table td:nth-child(3) code{display:block}
.lesson-article .prose .log-table td:last-child,.lesson-article .prose .log-table th:last-child{text-align:right}

/* ── 과제 제출 · 질문하기 팝업 ───────────────────────────────────────── */
.lesson-article .lesson-actions{max-width:var(--reading-width);margin:var(--sp-9) 0 0;padding-top:var(--sp-6);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.lesson-actions-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.lesson-actions-row{display:flex;gap:10px;flex-wrap:wrap}
.action-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--field-line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 15px var(--font-body);cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.action-btn:hover{background:var(--soft)}
.action-btn:active{transform:scale(.97)}
.action-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.action-btn.is-primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.action-btn.is-primary:hover{background:var(--accent);filter:brightness(1.06)}
.form-dialog{border-radius:var(--r)!important;width:min(680px,calc(100vw - 32px));max-height:min(88dvh,calc(100dvh - 32px));overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:26px}
.form-dialog::backdrop{background:var(--backdrop,#07111bc9)}
.form-dialog .ask-head h2{margin-right:44px}
.form-dialog[open]{animation:form-dialog-in .16s ease-out}
@keyframes form-dialog-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.form-dialog[open]{animation:none}.action-btn{transition:none}}
@media(max-width:800px){
  .form-dialog{padding:20px 16px}
  .lesson-actions-row{width:100%}
  .lesson-actions-row .action-btn{flex:1 1 0;justify-content:center}
}
@media print{.form-dialog,.lesson-actions{display:none}}

/* ── 편집기 탭 전환 (Adobe Premiere Pro 기본 / DaVinci Resolve) ────────────── */
.prose .editor-tabs{margin:var(--sp-6) 0}
.lesson-article .prose>.editor-tabs{margin-block:32px;max-width:none}
.editor-tab-list{display:inline-flex;align-items:center;gap:4px;padding:4px;margin-bottom:14px;background:var(--soft);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap}
.editor-tab{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:700 13px/1.2 var(--font-body);padding:7px 14px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.editor-tab:hover{color:var(--ink)}
.editor-tab.is-active,.editor-tab[aria-selected="true"]{background:var(--surface);color:var(--link);border-color:var(--line-strong);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.editor-panel>figure.teaching-media,.editor-panel>.grid{margin-top:0!important;margin-bottom:0!important}
.editor-panel[hidden]{display:none!important}

/* ── 미리보기 판 및 빈 자리 (Slot) 스타일 ────────────────────────────── */
.preview-banner {
  background: #7c2d12;
  color: #ffedd5;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #9a3412;
  position: relative;
  z-index: 100;
}

[data-theme="paper"] .preview-banner {
  background: #ffedd5;
  color: #9a3412;
  border-bottom: 1px solid #fdba74;
}

.slot-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  vertical-align: middle;
  margin-left: 8px;
}

[data-theme="paper"] .slot-badge {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.slot {
  display: block;
}

body[data-preview="1"] .slot {
  display: block;
}

body[data-preview="1"] p.slot.slot-dl {
  display: flex;
}

.slot-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  text-align: center;
  background: rgba(245, 158, 11, 0.06);
  border: 2px dashed rgba(245, 158, 11, 0.5);
  border-radius: var(--r, 8px);
  box-sizing: border-box;
}

[data-theme="paper"] .slot-box {
  background: #fffbeb;
  border-color: #f59e0b;
}

[data-ratio="16x9"] .slot-box {
  aspect-ratio: 16 / 9;
  width: 100%;
}

[data-ratio="strip"] .slot-box {
  min-height: 80px;
  width: 100%;
  padding: 14px 18px;
}

.slot-id {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

[data-theme="paper"] .slot-id {
  color: #b45309;
  background: #fde68a;
}

.slot-tag {
  font-size: 12px;
  font-weight: 600;
  color: #fcd34d;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}

[data-theme="paper"] .slot-tag {
  color: #92400e;
  background: rgba(0, 0, 0, 0.05);
}

.slot-what {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #e9eef2);
  line-height: 1.5;
  max-width: 90%;
}

.slot-spec {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--muted, #94a3b8);
}

.slot-dl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
  border-radius: 6px;
  margin: 14px 0;
}

[data-theme="paper"] .slot-dl {
  background: #fffbeb;
  border-color: #f59e0b;
}

/* ── 전 레벨 공통 카드 · 단계 띠 · AI 출력 · 도해 확장 (L1~L5 통합) ───────── */
.prose .tf-pair.tf-pair-wide{grid-template-columns:minmax(0,1fr)}
.prose .tf-pair>.tf-step,.prose .tf>.tf-step{min-width:0;max-width:100%}
.prose .tf-step pre{max-width:100%;overflow-x:auto}
.prose .tf-step .l4-ai{max-width:100%}
:root{--l4-s1:#6d8fb8;--l4-s2:#bf9f5f;--l4-s3:#76a98d;--l4-s4:#9c88bd;--l4-s5:#5fa9a7;--l4-a:16%;--l4-bad:#e0605a;--l4-ok:#4bb27a}
[data-theme=paper]{--l4-a:18%;--l4-bad:#c0392b;--l4-ok:#1f8a52}
.lesson-article .prose .table-wrap .l4-st1{--stg:var(--l4-s1)}
.lesson-article .prose .table-wrap .l4-st2{--stg:var(--l4-s2)}
.lesson-article .prose .table-wrap .l4-st3{--stg:var(--l4-s3)}
.lesson-article .prose .table-wrap .l4-st4{--stg:var(--l4-s4)}
.lesson-article .prose .table-wrap .l4-st5{--stg:var(--l4-s5)}
.lesson-article .prose .table-wrap tr[class*="l4-st"] td,.lesson-article .prose .table-wrap tr[class*="l4-st"]:hover td,.lesson-article .prose .table-wrap td[class*="l4-st"]{background:color-mix(in srgb,var(--stg) var(--l4-a),transparent)}
.lesson-article .prose .table-wrap tr.l4-first td{border-top:2px solid color-mix(in srgb,var(--stg) 55%,transparent)}
.lesson-article .prose .table-wrap tr.l4-first:first-child td{border-top:0}
.lesson-article .prose .table-wrap td.l4-stname{font-weight:700;vertical-align:middle;border-left:4px solid var(--stg);padding-left:14px}
.lesson-article .prose .table-wrap tr.l4-first td.l4-stname:first-child{border-left:4px solid var(--stg);padding-left:14px}
.prose figure.dg .dg-tag{font-size:14px}
.prose figure.dg :is(.dg-chip,.dg-seg small,.dg-gate,.dg-rail small,.dg-bar-what small,.dg-bar small,.dg-stair small,.dg-pick>span,.dg-rec-out>span,.dg-eq-part small,.dg-files,.dg-badge,.dg-box em,.dg-strip-item span,.dg-wide span){font-size:14px}
.prose figure.dg small{font-size:14px}
.prose figure.dg .dg-no{font-size:15px}
.prose ol.l4-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.prose ol.l4-steps>li.l4-step{display:grid;grid-template-columns:36px 110px 112px minmax(0,1fr);align-items:center;gap:6px 16px;margin:0;padding:12px 18px 12px 14px;border:1px solid var(--line);border-left:6px solid var(--c,var(--line-strong));border-radius:10px;background:var(--soft);font-size:17px;line-height:1.5}
.prose ol.l4-steps>li.l4-step .dg-no{margin:0;width:34px;height:34px;font-size:16px}
.prose .l4-step .l4-sn{font-size:18px;line-height:1.3;margin:0}
.prose .l4-step .dg-seg{justify-content:center;flex-direction:row;padding:3px 14px;border-top-width:3px;white-space:nowrap}
.prose .l4-step .dg-seg small{font-size:15px;color:var(--ink);font-weight:700}
.prose .l4-fl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px 14px;align-items:center}
.prose .l4-fl em{font-style:normal;font-weight:800;color:var(--muted);margin-right:8px}
.prose .l4-fl i{font-style:normal;color:var(--link);font-weight:800;font-size:20px}
.prose .l4-fl--col{grid-template-columns:minmax(0,1fr);gap:2px}
.prose .l4-sub{color:var(--muted);font-size:15px}
.prose ol.l4-steps>li.l4-step--pipe{grid-template-columns:36px 150px minmax(0,1fr) auto}
.prose ol.l4-steps>li.l4-step--pipe.is-here{outline:2px solid #e6a23c;outline-offset:2px}
.prose .l4-step--pipe .dg-gate{margin:0;font-size:15px;white-space:nowrap}
.prose .l4-tl{display:flex;gap:12px;align-items:baseline;margin:22px 0 8px;font-size:17px}
.prose .l4-tl span{color:var(--muted)}
.prose .l4-tbar{display:flex;gap:2px;min-width:0}
.prose .l4-tbar>span{flex-basis:0;min-width:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border-radius:4px;background:color-mix(in srgb,var(--c) 85%,transparent);color:#10151d;font-size:15px;font-weight:700;line-height:1.3;overflow:hidden}
.prose .l4-tbar--n>span{height:46px;font-size:15px}
.prose .l4-tbar--2>span{height:62px;min-width:46px;font-size:16px}
.prose .l4-tbar--2>span small{font-size:15px;color:#10151d;font-weight:600}
.prose .l4-tbar>span.l4-sp{background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(16,21,29,.34) 5px 7px)}
.prose .l4-tbar>span.l4-nw{box-shadow:inset 0 0 0 3px var(--ink)}
.prose .l4-sw{display:inline-block;width:24px;height:14px;border-radius:3px;margin-right:8px;vertical-align:-2px;background-color:#e6a23c}
.prose .l4-sw.l4-nw{box-shadow:inset 0 0 0 3px var(--ink)}
.prose .l4-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0}
.prose .l4-pair>figure{margin:0}
.prose .l4-pair video{width:100%;height:auto;display:block}
.prose .l4-ov{position:relative;width:100%}
.prose .l4-ov>.dg-svg{display:block}
.prose .l4-lb{position:absolute;white-space:nowrap;font-size:15px;line-height:1.25;pointer-events:none}
.prose .l4-lb--lg{font-size:16px}
.prose .l4-lb--b{font-weight:700}
.prose .l4-pin{position:absolute;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:16px;font-weight:800;line-height:1}
@media(max-width:700px){
  .prose ol.l4-steps>li.l4-step{grid-template-columns:36px minmax(0,1fr) auto;padding:12px 14px 12px 12px}
  .prose ol.l4-steps>li.l4-step>.l4-fl{grid-column:1 / -1;grid-template-columns:minmax(0,1fr)}
  .prose .l4-fl i{display:none}
  .prose ol.l4-steps>li.l4-step--pipe{grid-template-columns:36px minmax(0,1fr)}
  .prose ol.l4-steps>li.l4-step--pipe>.l4-fl{grid-column:2}
  .prose ol.l4-steps>li.l4-step--pipe>.dg-gate,.prose ol.l4-steps>li.l4-step--pipe>span:last-child:empty{grid-column:2;justify-self:start}
  .prose .l4-stack{flex-direction:column;align-items:stretch}
  .prose .l4-stack>.dg-eq-part{flex:none;width:100%;max-width:none}
  .prose .l4-pair{grid-template-columns:minmax(0,1fr)}
}
.prose .l4-bad{color:var(--l4-bad);font-weight:700}
.prose .l4-ok{color:var(--l4-ok);font-weight:700}
.prose .l4-ai{border:1px solid var(--line);border-radius:12px;background:var(--soft);overflow:hidden;color:var(--ink);text-align:left;margin:10px 0}
.prose .l4-ai-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--muted);font-weight:700}
.prose .l4-ai-badge{border:1px solid var(--link);color:var(--link);border-radius:999px;padding:1px 10px;font-size:14px;font-weight:700}
.prose .l4-ai--doc .l4-ai-badge{border-color:var(--l4-ok);color:var(--l4-ok)}
.prose .l4-ai-ask{margin:14px 16px 4px auto;max-width:92%;width:fit-content;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--ink) 9%,transparent);font-size:15px;line-height:1.6}
.prose .l4-ai-body{padding:12px 16px 14px}
.prose .l4-ai-body>p{display:block!important;word-break:keep-all;margin:0 0 10px;font-size:15px;line-height:1.65;padding:0;background:none}
.prose .l4-ai-body>p:last-child{margin-bottom:0}
.prose .l4-ai-body>p.l4-ev{position:relative;border-left:4px solid var(--l4-bad);padding:2px 0 2px 12px;margin-left:-2px}
.prose .l4-ev-tag{display:block;width:fit-content;margin:0 0 4px;padding:0 10px;border:1.5px solid var(--l4-bad);border-radius:6px;color:var(--l4-bad);font-size:14px;font-weight:800;line-height:1.5}
.prose .l4-ai-scroll{overflow-x:auto}
.prose .l4-ai-tbl{width:100%;min-width:820px;border-collapse:collapse;font-size:14px;line-height:1.5}
.prose .l4-ai-tbl th{padding:8px 10px;text-align:left;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line-strong);background:color-mix(in srgb,var(--ink) 6%,transparent);white-space:nowrap}
.prose .l4-ai-tbl td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose .l4-ai-tbl td.n{white-space:nowrap}
.prose .l4-ai-tbl td.fx{background:color-mix(in srgb,var(--l4-ok) 22%,transparent);font-weight:700}
.prose .l4-ai-tbl td.bd{background:color-mix(in srgb,var(--l4-bad) 16%,transparent);font-weight:700}
.prose .l4-ai-tbl tfoot td{border-bottom:0;padding-top:12px;font-weight:700}
.prose .l4-ai-tbl td.sum{text-align:center;font-size:17px;font-weight:800;border:2.5px solid var(--l4-bad);color:var(--l4-bad);border-radius:4px}
.prose .l4-ai-tbl td.sum--ok{border-color:var(--l4-ok);color:var(--l4-ok)}
.prose .l4-pt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;line-height:1.55}
.prose .l4-pt th{padding:8px 10px;text-align:left;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line-strong);font-size:14px}
.prose .l4-pt td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose .l4-pt td:first-child,.prose .l4-pt th:first-child{padding-left:0}
.prose .l4-pt td.fx{background:color-mix(in srgb,var(--l4-ok) 20%,transparent)}
.prose .l4-pt td.bd{background:color-mix(in srgb,var(--l4-bad) 14%,transparent)}
.prose .l4-pt-title{margin:0 0 6px;font-size:14px;color:var(--muted);font-weight:700}
.prose .l4-pt-wrap{overflow-x:auto}
.prose .l4-fc{display:grid;grid-template-columns:minmax(260px,360px) 104px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:center;margin:14px 0 4px}
.prose .l4-fc-start{grid-column:1;grid-row:1;justify-self:center;padding:8px 26px;border:2px solid var(--line-strong);border-radius:999px;background:var(--soft);font-size:16px;font-weight:700;text-align:center}
.prose .l4-fc-d0{grid-column:1;grid-row:2}
.prose .l4-fc-q1{grid-column:1;grid-row:3}
.prose .l4-fc-y1{grid-column:2;grid-row:3}
.prose .l4-fc-r1{grid-column:3;grid-row:3}
.prose .l4-fc-n1{grid-column:1;grid-row:4}
.prose .l4-fc-q2{grid-column:1;grid-row:5}
.prose .l4-fc-y2{grid-column:2;grid-row:5}
.prose .l4-fc-r2{grid-column:3;grid-row:5}
.prose .l4-fc-n2{grid-column:1;grid-row:6}
.prose .l4-fc-r3{grid-column:1 / span 3;grid-row:7;justify-self:start;width:100%;max-width:600px}
.prose .l4-fc-d0,.prose .l4-fc-yes,.prose .l4-fc-no{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--link);font-weight:800;font-size:16px;line-height:1.2;min-height:34px}
.prose .l4-fc-yes em,.prose .l4-fc-no em{font-style:normal;color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:1px 10px;background:var(--soft);font-size:15px}
.prose .l4-fc-yes i,.prose .l4-fc-no i,.prose .l4-fc-d0 i{font-style:normal;font-size:24px;line-height:1}
.prose .l4-fc-yes .d{display:none}
.prose .l4-fc-q{position:relative;isolation:isolate;min-height:156px;display:grid;place-content:center;gap:2px;padding:0 21%;text-align:center;font-size:16px;line-height:1.4;font-weight:700}
.prose .l4-fc-q small{display:block;font-size:14px;color:var(--muted);font-weight:700}
.prose .l4-fc-q::before,.prose .l4-fc-q::after{content:"";position:absolute;z-index:-1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.prose .l4-fc-q::before{inset:0;background:var(--link)}
.prose .l4-fc-q::after{inset:3px;background:var(--soft)}
.prose .l4-fc-res{display:grid;gap:4px;padding:12px 16px;border:1px solid var(--line);border-left:6px solid var(--c,var(--line-strong));border-radius:10px;background:var(--soft);font-size:15px;line-height:1.5}
.prose .l4-fc-res b{font-size:18px;line-height:1.3}
.prose .l4-fc-cuts{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;font-size:15px;color:var(--muted)}
.prose .l4-fc-cuts .dg-chip{font-size:14px;color:var(--ink);font-weight:700}
.prose .l4-fc-notes{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px;color:var(--muted)}
.prose .l4-fc-notes b{color:var(--ink)}
@media(max-width:760px){
  .prose .l4-fc{grid-template-columns:minmax(0,1fr)}
  .prose .l4-fc>*{grid-column:1!important;grid-row:auto!important}
  .prose .l4-fc-yes .r{display:none}
  .prose .l4-fc-yes .d{display:inline}
  .prose .l4-fc-q{padding:0 20%}
}
.prose .l4-arch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 0}
.prose .l4-arch img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--soft)}
.prose small.credit{display:block;min-height:1.2em;margin-top:6px;font-size:14px;color:var(--muted)}
@media(max-width:560px){.prose .l4-arch{grid-template-columns:minmax(0,1fr)}}
.prose .l4-goal{border:1px solid var(--line-strong);border-left:5px solid var(--accent);border-radius:12px;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.18);padding:16px 22px 16px 20px;margin:0 0 24px}
.prose .l4-goal-h{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:3px 10px;border-radius:6px;background:var(--accent-soft);font-size:13.5px;font-weight:800;color:var(--link);letter-spacing:.02em;line-height:1.4}
.prose .l4-goal ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.prose .l4-goal li{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.prose .table-wrap table.l4-nw th:first-child,.prose .table-wrap table.l4-nw td:first-child{white-space:nowrap}
.prose .curve-track{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.prose .curve-step{flex:1;min-width:140px;border:1px solid var(--line-strong);border-top:3px solid var(--link);border-radius:10px;background:var(--surface);padding:12px 14px;font-size:14px}
.prose .curve-step b{display:block;font-size:16px;margin-bottom:4px;color:var(--ink)}
.prose .audio-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);padding:14px 16px;border-radius:10px;border:1px solid var(--line-strong);margin:12px 0}
.prose .audio-flow span{padding:5px 12px;border-radius:6px;background:color-mix(in srgb,var(--link) 15%,transparent);font-size:14px;font-weight:700}
.prose .wave-bar{display:grid;grid-template-columns:2fr 1fr 0.5fr 2.5fr;gap:6px;background:var(--surface);padding:14px;border-radius:10px;border:1px solid var(--line-strong);margin:12px 0;text-align:center}
.prose .wave-seg{padding:10px 6px;border-radius:6px;background:color-mix(in srgb,var(--link) 15%,transparent);border:1px solid var(--line);font-size:13px;line-height:1.4}
.prose .wave-seg strong{display:block;font-size:14px;margin-bottom:4px}
.prose .wave-silence{background:color-mix(in srgb,var(--muted) 15%,transparent);border-style:dashed}
.prose .grid-six{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
@media (max-width:768px){.prose .grid-six{grid-template-columns:1fr}}
.prose .strip-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0;font-size:13px;text-align:center}
.prose .strip-bar div{padding:8px 6px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.prose .strip-bar div.active{background:color-mix(in srgb,var(--link) 20%,transparent);border-color:var(--link);font-weight:700}
.prose .crop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
@media(max-width:700px){.prose .crop-grid{grid-template-columns:repeat(2,1fr)}}
.prose .dg-formats{width:100%}
.prose .tf-pair figure.teaching-media>video{aspect-ratio:16/9;object-fit:contain;background:#000}
.prose .dg-thumb.multi img{object-fit:cover}
.prose .table-wrap th{white-space:nowrap}
.prose .table-wrap table:has(th:nth-child(5)) td:first-child{white-space:nowrap}
.prose .dg-badge,.prose .dg-seg small,.prose .dg-box em,.prose .dg-strip-item span,.prose .dg-wide span,.prose .dg-gate,.prose .dg-card small,.prose .dg-stair small,.prose .dg-pick>span,.prose .dg-rec-out>span,.prose .dg-rec-line,.prose .dg-thumb.txt,.prose .wave-seg,.prose .strip-bar,.prose .dg-fmt b{font-size:14px}

/* Advanced Track Badges and Basic Skip Navigation */
.adv-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  vertical-align: middle;
  background: var(--surface-hover, #232a32);
  color: var(--faint, #a0a6b0);
  border: 1px solid var(--line, #333a44);
}

.adv-badge-mini {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  padding: 1px 4px;
  margin-left: 4px;
  border-radius: 3px;
  vertical-align: 1px;
  background: rgba(143, 227, 198, 0.12);
  color: var(--accent, #8fe3c6);
  border: 1px solid rgba(143, 227, 198, 0.25);
}

.lesson-skip-advanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  margin: var(--sp-6, 24px) 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surface-alt, #1c2228);
  border: 1px solid var(--line-strong, #333a44);
  font-size: 14px;
}

.lesson-skip-advanced .skip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint, #a0a6b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lesson-skip-advanced .skip-link {
  font-weight: 600;
  color: var(--link, #8fe3c6);
  text-decoration: none;
  transition: color 0.15s ease;
}

.lesson-skip-advanced .skip-link:hover {
  text-decoration: underline;
  color: var(--accent, #a6edd4);
}