/* Native CSS is scoped to the EX figure, leaving the surrounding reader unchanged. */
@scope (.ex-native-figure) {
:root{--ink:#182e34;--muted:#53676e;--teal:#163d45;--blue:#205ac2;--warm:#a54f16;--line:#d9e1e3;--paper:#fafbf9;--panel:#f0f5f5;--red:#a93232;--green:#226243}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.8;word-break:keep-all}button,a,summary{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:var(--blue);text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e5a530;outline-offset:4px}.review-banner{background:#e9f0eb;color:#325744;text-align:center;font-size:12px;padding:6px 12px}.review-banner span{margin-left:12px;color:#53665b}.site-header{max-width:1080px;margin:auto;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:19px;font-weight:800;text-decoration:none;color:var(--ink)}.brand span{display:inline-block;font-size:13px;font-weight:500;margin-left:14px;border-left:1px solid var(--line);padding-left:14px}#outline{position:relative;font-size:14px}#outline summary{cursor:pointer}#lesson-list{position:absolute;right:0;top:40px;width:330px;background:white;box-shadow:0 15px 45px #182e3426;z-index:10;padding:20px;border:1px solid var(--line);max-height:75vh;overflow:auto}#lesson-list a{display:block;color:var(--ink);font-size:13px;padding:8px 10px;text-decoration:none;border-radius:3px}#lesson-list a.active{background:#e8f0ec;font-weight:700}#lesson-list h3{font-size:13px;color:var(--muted);margin:14px 10px 5px}main{max-width:980px;margin:auto;padding:48px 38px 100px}.eyebrow{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 16px;letter-spacing:.04em}h1{font-size:38px;line-height:1.35;letter-spacing:-1.8px;margin:0 0 20px;max-width:790px}.intro{font-size:19px;line-height:1.9;max-width:790px;margin:0 0 28px;color:#3d565f}.progress-track{height:3px;background:var(--line);margin:25px 0 42px}.progress-track span{display:block;height:100%;background:var(--teal)}section{margin:46px 0}h2{font-size:24px;line-height:1.5;letter-spacing:-.7px;margin:0 0 12px}h3{font-size:18px;margin:20px 0 8px}p{margin:9px 0 16px}.section-kicker{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:.06em;margin-bottom:5px}.lesson-copy{font-size:17px}.definition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:22px}.definition-grid article{padding:22px 22px 22px 0}.definition-grid article+article{border-left:1px solid var(--line);padding-left:22px}.definition-grid strong{display:block;font-size:17px;margin-bottom:8px}.definition-grid p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.visual{background:white;border:1px solid var(--line);border-radius:6px;padding:24px;margin:24px 0}.visual-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}.visual-heading strong{font-size:16px}.visual-heading small{display:block;font-size:12px;color:var(--muted)}.visual svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}.visual svg text{fill:var(--ink);font-size:16px}.visual svg .small{font-size:13px;fill:var(--muted)}.visual svg .bold{font-weight:700}.figure-note{font-size:13px;color:var(--muted);line-height:1.75;margin:14px 0 0}.photo{position:relative;overflow:hidden;border-radius:3px;background:#edf1f1}.photo img{display:block;width:100%;height:auto}.photo .pin{position:absolute;min-width:30px;min-height:30px;display:grid;place-items:center;background:var(--teal);color:white;border:2px solid white;border-radius:50%;font-size:14px;font-weight:800;box-shadow:0 2px 8px #0006}.photo-labels{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:18px}.photo-labels p{font-size:14px;margin:0}.photo-labels b{color:var(--teal);margin-right:5px}.credit{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.6}.credit a{color:inherit}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}.photo-pair img{width:100%;height:290px;object-fit:contain;background:#f5f6f5}.photo-pair h3{font-size:16px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}th{font-weight:700;background:#eef3f3}td:first-child{font-weight:700;min-width:125px}.takeaway{background:#e9f1eb;border-left:3px solid #3d7452;padding:20px 24px;margin:28px 0}.takeaway strong{font-size:14px;color:#356344}.takeaway p{margin:6px 0;font-size:17px}.caution{border-left:3px solid #a46b3f;background:#faf3eb;padding:16px 20px;font-size:15px}.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.compare-row>div{background:var(--panel);padding:20px}.compare-row h3{margin-top:0}.compare-row p{font-size:15px}.visual-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}.secondary{border:1px solid #9badb3;background:white;color:var(--ink);padding:7px 15px;border-radius:4px;font-size:13px}.range-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.range-controls label{font-size:14px}.range-controls input{display:block;width:100%;margin-top:10px;accent-color:var(--teal)}.mechanism-caption{margin:12px 0;font-weight:700;font-size:15px;color:var(--teal)}.step-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.step-strip>div{padding:12px;font-size:13px;background:var(--panel)}.step-strip>div.active{background:#dcece2;color:#254f34}.step-strip strong{display:block;font-size:14px}.source-box{border-top:1px solid var(--line);padding-top:18px;font-size:13px;margin:34px 0}.source-box summary{cursor:pointer;font-weight:700}.source-box ul{padding-left:20px;margin:12px 0}.source-box li{margin:8px 0}.source-box small{color:var(--muted);display:block}.questions{border-top:2px solid var(--ink);padding-top:30px;margin-top:60px}.question{margin:26px 0 36px}.question-title{font-size:18px;line-height:1.8}.question-number{font-size:12px;color:var(--muted);margin:0 0 8px}.question mark{background:#fff0b9;color:#763f00;padding:2px 5px;border-radius:2px}.choices{display:grid;gap:9px}.choice{border:1px solid var(--line);border-radius:4px;background:white;padding:14px 18px;text-align:left;font-size:16px;display:flex;gap:12px;align-items:baseline}.choice .n{flex-shrink:0;color:var(--muted);font-size:13px}.choice:hover:not(:disabled){background:#edf3f2;border-color:#8ca7aa}.choice.chosen{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.choice.correct{background:#edf5ef;border-color:#4c825f}.choice.wrong{background:#fbefed;border-color:#b96b60}.choice:disabled{cursor:default;color:var(--ink)}.feedback{margin-top:16px;background:#f0f5f4;border-radius:4px;padding:18px 20px;font-size:14px}.feedback>strong{font-size:16px}.feedback .reason{padding:8px 0;border-bottom:1px solid #dce5e3}.feedback .reason:last-child{border:0}.reason b{margin-right:8px}.answer-source{margin-top:14px;font-size:12px;line-height:1.65;color:var(--muted)}.answer-source a{color:inherit}.question-hint{color:#815b15;font-size:13px;margin:0 0 12px}.lesson-end{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:34px}.lesson-end p{font-size:14px;margin:0;color:var(--muted)}.primary{color:white;background:var(--teal);border:1px solid var(--teal);border-radius:4px;padding:12px 24px;font-size:15px;font-weight:700;white-space:nowrap}.primary:hover{background:#225963}.primary:disabled{opacity:.5;cursor:default}.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:#fffffff5;backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:15px max(24px,calc((100vw - 904px)/2));display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:6}.bottom-bar div{max-width:70%;line-height:1.6}.bottom-bar span{display:block;font-size:11px;color:var(--muted)}.bottom-bar strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-footer{max-width:900px;margin:0 auto 100px;font-size:12px;color:var(--muted);padding:0 28px}.loading{padding:50px;text-align:center}.complete{padding:40px 0}.complete h1{font-size:34px}.subtle{font-size:13px;color:var(--muted)}
@media(max-width:680px){.site-header{padding:18px 20px}.brand{font-size:17px}.brand span{margin-left:9px;padding-left:9px}main{padding:30px 20px 95px}h1{font-size:29px;letter-spacing:-1.2px}.intro{font-size:17px}.eyebrow{font-size:12px}.progress-track{margin:22px 0 32px}section{margin:35px 0}h2{font-size:21px}.lesson-copy{font-size:16px}.visual{padding:16px 12px;border-radius:4px}.visual-heading{padding:0 4px}.visual-heading strong{font-size:14px}.visual svg text{font-size:17px}.visual svg .small{font-size:14px}.definition-grid{grid-template-columns:1fr}.definition-grid article{padding:16px 0}.definition-grid article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}.photo-labels{grid-template-columns:1fr;gap:8px}.photo-pair,.compare-row{grid-template-columns:1fr}.photo-pair img{height:250px}.question-title{font-size:17px}.choice{padding:13px 12px;font-size:15px}.takeaway{padding:16px 18px}.takeaway p{font-size:16px}.range-controls{grid-template-columns:1fr}.step-strip{grid-template-columns:1fr 1fr}.bottom-bar{padding:12px 16px}.bottom-bar strong{font-size:12px}.bottom-bar .primary{font-size:13px;padding:11px 15px}.lesson-end{align-items:start;flex-direction:column}.lesson-end .primary{width:100%}#lesson-list{width:min(330px,calc(100vw - 40px))}td,th{padding:12px 10px;font-size:14px}.photo .pin{min-height:25px;min-width:25px;font-size:12px}.review-banner{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.mobile-battery{display:none}
@media(max-width:680px){.mobile-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}.mobile-panels.single{grid-template-columns:1fr;gap:26px}.visual svg.mobile-panel{overflow:hidden}.visual svg.mobile-mechanism{overflow:hidden}.mobile-mechanism text{display:none}.mobile-figure-labels{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.mobile-figure-labels p{font-size:14px;line-height:1.7;margin:4px 0}.desktop-battery{display:none!important}.mobile-battery{display:block;border:3px solid #7a929c;padding:16px;border-radius:6px}.mobile-battery strong{font-size:14px}.mobile-battery>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.mobile-battery span{display:grid;text-align:center;border:1px solid #9dafb7;background:#f4f7f7;padding:12px 8px}.mobile-battery small{font-size:11px}.mobile-battery p{font-size:13px;margin-bottom:0}}

@media(max-width:680px){.visual .mobile-mechanism .mobile-svg-label text{display:block;font-size:14px;font-weight:700}}

.mobile-figure-labels b{display:block}.mobile-figure-labels span{display:block;color:var(--muted);font-size:13px}.mobile-figure-labels p+p{margin-top:12px}

/* PC 검토 화면 전용. 휴대폰 대응은 별도 승인 후 진행합니다. */
@media(min-width:681px){
.clear-visual .clear-diagram{max-width:620px;margin:8px auto 16px;overflow:visible}
.clear-visual .clear-diagram text{font-size:20px;font-weight:600}
.clear-visual .clear-diagram .small{font-size:16px;font-weight:400;fill:#53676e}
.clear-visual .clear-diagram .blue{fill:#205ac2}.clear-visual .clear-diagram .orange{fill:#a8521c}
.learning-flow{list-style:none;counter-reset:flow;padding:0;margin:24px 0;border-top:1px solid #d9e1e3}
.learning-flow li{counter-increment:flow;position:relative;padding:20px 18px 20px 58px;border-bottom:1px solid #d9e1e3}
.learning-flow li:before{content:counter(flow);position:absolute;left:12px;top:22px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6eeea;color:#234d3a;font-size:14px;font-weight:700}
.learning-flow strong{font-size:17px}.learning-flow p{margin:4px 0 0;color:#53676e;font-size:15px}
.clamp-photo-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:28px;align-items:start}
.clamp-photo-grid .photo{height:430px;background:#f1f3f2}.clamp-photo-grid .photo img{height:100%;object-fit:contain}
.clamp-photo-grid .photo-labels{grid-template-columns:1fr}.clear-visual .photo-labels b{display:block}
.attachment-pair,.connection-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.attachment-pair>div,.connection-pair>div{background:#f7faf9;border:1px solid #e5ece9;padding:12px}
.attachment-pair h3,.connection-pair h3{font-size:15px;margin:0 0 8px;text-align:center}
.motion-caption{font-size:16px;color:#254c56;font-weight:600;background:#f0f5f5;padding:13px 16px;margin:8px 0 0;min-height:55px}
.step-motion{font-size:15px;padding:9px 18px}.step-motion:disabled{cursor:progress;opacity:.6}
.scope-note{color:#53676e;font-size:13px;padding:12px 0 4px}
}

@media(min-width:681px){.mast-lift-photo{max-width:480px;margin:0 auto}.mast-lift-photo svg{width:100%;max-height:540px;background:#f5f7f6;overflow:hidden}}

/* 합의한 PC 학습 검토 화면. 기존 휴대폰 규칙은 유지합니다. */
@media(min-width:681px){
.numbered-explanation{margin:18px 0 22px}.numbered-explanation>p{display:flex;gap:12px;align-items:baseline;margin:8px 0;font-size:17px;line-height:1.8}.part-number{display:inline-grid;place-items:center;flex:0 0 26px;height:26px;background:#163d45;color:white;border-radius:50%;font-size:13px;font-weight:700}.numbered-explanation b{margin-right:5px}
.flow-visual{padding:20px}.flow-visual .visual-heading{margin-bottom:12px}.flow-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:20px;align-items:start;scroll-margin-top:18px}.flow-drawing{min-width:0}.flow-drawing>svg{width:100%;height:auto;max-height:calc(100vh - 205px);margin:0 auto;display:block;overflow:visible}.flow-drawing svg text{font-size:20px;font-weight:600}.flow-drawing svg .small{font-size:16px;font-weight:400}.flow-drawing .attachment-pair{grid-template-columns:1fr;gap:12px}.flow-drawing .attachment-pair>div{padding:8px 10px;display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px}.flow-drawing .attachment-pair h3{margin:0;text-align:left;font-size:14px}.flow-drawing .attachment-pair svg{max-height:180px}.flow-drawing .attachment-pair svg text{font-size:17px}
.flow-side{min-width:0}.flow-current{background:#edf4f2;color:#244d3b;font-size:14px;font-weight:700;padding:10px 12px;margin:0 0 10px;line-height:1.5;min-height:42px}.flow-sequence{list-style:none;padding:0;margin:0}.flow-sequence>li{display:flex;gap:9px;padding:10px 11px;border-left:3px solid transparent;border-bottom:1px solid #e5ebeb;color:#526970;line-height:1.5}.flow-sequence strong{display:block;font-size:14px;font-weight:700}.flow-sequence p{margin:4px 0 0;font-size:13px;line-height:1.65}.flow-number{display:grid;place-items:center;align-self:start;flex:0 0 22px;height:22px;background:#edf1f2;border-radius:50%;font-size:12px;font-weight:700;color:#49636f}.flow-sequence>li.active{background:#eaf2ed;color:#173f32;border-left-color:#39755b}.flow-sequence>li.active .flow-number{background:#32634e;color:white}.flow-buttons{display:flex;gap:9px;justify-content:space-between;margin-top:12px}.flow-buttons button{font-size:14px;padding:8px 14px}.flow-next{background:#163d45;color:white;border-color:#163d45;min-width:135px}.flow-buttons button:disabled{opacity:.65;cursor:progress}.flow-visual .figure-note{font-size:12px;margin-top:12px}
.prompt-explanation{border-left:3px solid #688980;padding:8px 12px;background:#e6efeb;line-height:1.8;margin:14px 0 10px}
}

/* PC 단계 설명 칸을 직접 선택합니다. 그림 크기와 열 비율은 유지합니다. */
@media(min-width:681px){.flow-sequence>li[role="button"]{cursor:pointer;border-radius:4px}.flow-sequence>li[role="button"]:hover{background:#eef4f1;border-left-color:#8ba99b}.flow-sequence>li[role="button"].active:hover{background:#eaf2ed;border-left-color:#39755b}.flow-sequence>li[role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}}

/* 새 5개도 기존 PC 검토 모델의 그림·설명 비율을 따릅니다. */
@media(min-width:681px){
.bottom-bar[hidden]{display:none}
.ten-annotated-photo{max-width:760px;margin:0 auto}.ten-annotated-photo>svg{max-height:520px;overflow:hidden;display:block}
.ten-flow-svg text{font-size:19px;font-weight:600}.ten-flow-svg .small{font-size:16px;font-weight:400}.ten-static>svg{max-width:780px;margin:0 auto}
.ten-visual .flow-drawing>svg{max-height:calc(100vh - 205px)}.ten-visual .flow-sequence>li[role="button"]{cursor:pointer;border-radius:4px}
.ten-visual .flow-sequence>li[role="button"]:hover{background:#eef4f1;border-left-color:#8ba99b}.ten-visual .flow-sequence>li[role="button"].active:hover{background:#eaf2ed;border-left-color:#39755b}
.ten-visual .flow-sequence>li[role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}
}

/* 15개 보완도 PC에서만 배치를 조정합니다. 기존 모바일 규칙은 유지합니다. */
@media(min-width:681px){
.fifteen-static>svg{max-width:700px;margin:auto}.fifteen-static svg text{font-size:19px}.fifteen-static svg .small{font-size:16px}
.fifteen-static>svg[aria-label^="완제품 두개의"]{max-width:540px}
.fifteen-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}.fifteen-compare>div{padding:12px;background:#f4f7f6}.fifteen-compare p{font-size:14px;margin:6px 0}
.fifteen-attachment-photo{display:block;width:100%;height:280px;object-fit:contain;background:#f4f7f6}
.fifteen-battery-pair{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:center}.fifteen-battery-pair img{display:block;width:100%;height:185px;object-fit:contain}.fifteen-battery-pair svg text{font-size:19px}.fifteen-battery-pair .subtle{font-size:12px;line-height:1.6;margin:8px 0 0}
.fifteen-visual .flow-drawing svg text{font-size:19px}.fifteen-visual .flow-drawing svg .small{font-size:16px}
.fifteen-visual [role="button"]{cursor:pointer}.fifteen-visual [role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}
}

/* 상세 보완: 기존 PC 원리도 모델을 유지하고 설명선을 읽을 크기로 배치한다. */
@media(min-width:681px){
.cylinder-detail-static>svg,.cylinder-family-panel>svg{display:block;max-width:600px;margin:8px auto}.cylinder-detail-static svg text{font-size:19px}.cylinder-detail-static svg .small{font-size:17px}
.cylinder-detail-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cylinder-detail-compare>div{background:#f4f7f6;padding:10px}.cylinder-detail-compare p{font-size:14px;line-height:1.7;margin:10px 0 0}
.cylinder-family-panel{padding:15px 0;border-bottom:1px solid #dbe5e5}.cylinder-family-panel:last-of-type{border-bottom:0}.cylinder-family-panel h3{font-size:17px;margin:0 0 12px}.cylinder-family-panel p{font-size:14px;line-height:1.8;margin:10px 0}
.cylinder-detail-visual .flow-drawing svg text{font-size:19px}.cylinder-detail-visual .flow-drawing svg .small{font-size:16px}.cylinder-detail-visual [role="button"]{cursor:pointer}.cylinder-detail-visual [role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}
}

/* Multiple short checks: next action stays directly below each explanation. */
.question-next{display:flex;justify-content:flex-end;margin-top:16px}

/* 읽기만 하는 사람도 바로 다음 학습으로 이동한다. */
[data-skip-lesson][hidden]{display:none}
.lesson-actions,.bottom-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bottom-bar .bottom-actions{max-width:none;justify-content:flex-end}
.question-photo{margin:16px 0 22px}
.question-photo img{display:block;max-width:100%;width:auto;max-height:390px;margin:0 auto;object-fit:contain;background:#f2f5f3}
.question-photo figcaption{font-size:12px;line-height:1.7;color:var(--muted);margin-top:8px}
#lesson-list{top:100%;margin-top:0}
.secondary:disabled{opacity:.55;cursor:default}
.bottom-bar[hidden]{display:none}
@media(max-width:680px){.fifteen-attachment-photo,.fifteen-battery-pair img{max-width:100%;height:auto;display:block}.fifteen-battery-pair{min-width:0}#lesson-list{width:min(330px,calc(100vw - 24px))}}
.learning-improvement-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.learning-improvement-drawing{max-width:620px;width:100%;margin:auto}.learning-improvement-drawing [hidden]{display:none}.learning-improvement-drawing svg text{font-size:20px}.learning-improvement-steps{display:grid;gap:8px}.learning-improvement-steps button[data-learning-step]{border:1px solid var(--line);border-radius:4px;background:white;color:var(--ink);text-align:left;padding:12px 14px}.learning-improvement-steps button[aria-pressed="true"]{background:#e9f1eb;border-color:#3d7452}.learning-improvement-steps strong,.learning-improvement-steps span{display:block}.learning-improvement-steps span{font-size:14px;margin-top:5px}.learning-improvement-caption{font-size:14px;margin:4px 0}.learning-improvement-steps .secondary{justify-self:start}
@media(min-width:1000px){.learning-improvement-layout:has(.learning-improvement-steps){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media(max-width:680px){.bottom-bar{display:grid;grid-template-columns:1fr;padding:8px 12px;gap:6px}.bottom-bar>div{max-width:100%}.bottom-bar .bottom-actions{display:flex;justify-content:stretch;gap:6px}.bottom-actions button{flex:1;white-space:normal;padding:9px 7px!important;font-size:12px!important}main{padding-bottom:150px}.question{scroll-margin-bottom:150px}.lesson-actions{width:100%}.lesson-actions button{flex:1}#lesson-list{max-height:65vh}}

/* First safety figure only: action first, with a separate finite steering example. */
/* S01 keeps its truck geometry; M01-A exposes the existing controls at every width. */
.ramp-key{font-size:14px;line-height:1.8;margin:8px 0 14px}
:is([data-ten-flow],[data-cylinder-detail-flow],[data-pump-detail],[data-op-flow="opRamps"]) [role="button"]{cursor:pointer;min-height:44px}
:is([data-ten-flow],[data-cylinder-detail-flow],[data-pump-detail],[data-op-flow="opRamps"]) [role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}
@media(max-width:680px){
 .ramp-visual .flow-drawing svg text{font-size:30px;font-weight:600}
 .ramp-visual .flow-drawing svg .small{font-size:27px}
 .ramp-visual .flow-current{font-size:14px;line-height:1.7;background:#edf4f2;padding:10px 12px}
 .ramp-visual .flow-sequence{list-style:none;margin:0;padding:0}
 .ramp-visual .flow-sequence>li{display:flex;gap:9px;padding:12px 10px;border-left:3px solid transparent;line-height:1.7}
 .ramp-visual .flow-sequence>li.active{background:#eaf2ed;border-left-color:#39755b}
 .ramp-visual .flow-number{font-weight:700}
 .ramp-visual .flow-sequence p{margin:5px 0 0;font-size:14px}
 .ramp-visual .flow-buttons{display:flex;gap:8px;flex-wrap:wrap}
 .ramp-visual .flow-buttons button{min-height:44px}
}
.people-safety-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;align-items:start}
.people-safety-drawing,.people-safety-side{min-width:0}
.people-safety-view{font-size:14px;color:var(--muted);margin:0 0 10px}
.people-safety-drawing>svg{display:block;width:100%;max-width:440px;margin:auto}
.people-safety-drawing svg text{font-size:23px;font-weight:600}
.people-safety-key{display:grid;gap:7px;font-size:13px;line-height:1.6;margin-top:12px}
.people-safety-key>span{display:flex;gap:8px;align-items:center}
.people-safety-key i{display:block;flex:none;width:20px;height:14px}
.people-safety-area{background:#f2c7af;border:1px dashed #ac582b}
[data-safety-scene="2"] .people-safety-area{background:#cfe4d8;border-color:#39755b}
.people-safety-start{border:1px dashed #8da1a5}
.people-safety-scenes{display:grid;gap:9px}
.people-safety-scenes button{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 14px;text-align:left;border:1px solid var(--line);border-radius:4px;background:white;color:var(--ink);font:inherit;font-size:15px;line-height:1.5;cursor:pointer}
.people-safety-scenes button[aria-pressed="true"]{background:#eaf2ed;border-color:#39755b}
.people-safety-number{display:grid;place-items:center;flex:none;border-radius:50%;width:24px;height:24px;background:#edf2f3;color:#355666;font-weight:700}
.people-safety-scenes [aria-pressed="true"] .people-safety-number{background:#39755b;color:white}
.people-safety-visual button:focus-visible{outline:3px solid #e5a530;outline-offset:3px}
.people-safety-detail{margin-top:18px;font-size:15px;line-height:1.85}
.people-safety-detail p{margin:10px 0}
.people-safety-context{font-weight:700;color:#355666}
.people-safety-action{border-left:3px solid #39755b;padding:10px 12px;background:#edf4ef;font-weight:600}
.people-safety-status{font-size:13px;line-height:1.7;color:var(--muted);min-height:24px;margin:12px 0}
.people-safety-controls{display:flex;gap:8px;flex-wrap:wrap}
.people-safety-controls button{min-height:44px;font-size:13px}
.people-safety-visual [hidden]{display:none!important}
@media(max-width:680px){
 .people-safety-layout{grid-template-columns:minmax(0,1fr);gap:22px}
 .people-safety-scenes button{font-size:14px;min-height:48px;padding:10px 12px}
 .people-safety-detail{font-size:14px}
 .people-safety-controls{scroll-margin-bottom:140px}
 .people-safety-visual .figure-note{line-height:1.8}
}
/* U01/U02: static comparisons retain readable independent panels when narrow. */
.u12-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px;margin:18px 0}
.u12-panel{background:#fafcfb;border:1px solid #d1dedd;border-radius:12px;padding:14px}
.u12-panel h4,.u12-document-pair h4{margin:0 0 10px;font-size:17px;color:#163d45}
.u12-panel svg{display:block;width:100%;height:auto}
.u12-panel p{font-size:15px;line-height:1.7;margin:10px 0 0}
.u12-document-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin:18px 0}
.u12-document-pair>div{border:1px solid #c4d6d4;border-radius:12px;padding:18px;background:#fafcfb}
.u12-document-pair dl{margin:0;display:grid;grid-template-columns:90px 1fr;gap:12px}
.u12-document-pair dt{font-weight:700;color:#315d62}
.u12-document-pair dd{margin:0;line-height:1.65}

/* 원포인트: 본문은 그대로 두고 기존 기억 상자의 공통 표시를 통합합니다. */
.memory-point{max-width:790px;margin:18px 0 26px;overflow-wrap:anywhere}
.memory-point .memory-point-label{display:block;margin-bottom:8px;letter-spacing:.03em}
.memory-point .memory-concept{font-size:14px;color:#356344}
.memory-point p{line-height:1.8}

/* Concept + question learning only; shared mock styles have no this wrapper. */
.choice-row.learning-choice-row{min-width:0;display:grid;gap:8px}
.choice-row.learning-choice-row>.choice{width:100%}
.choice-row.learning-choice-row>.choice-explanation{padding:12px 14px;border:1px solid #dce5e3;border-radius:4px;background:#f7faf9;line-height:1.65}
.choice-row.learning-choice-row .choice-badge:not([hidden]){display:block;margin-top:6px;font-size:13px}
.choice-row.learning-choice-row>.choice.correct{background:#edf5ef;border-color:#4c825f}
.choice-row.learning-choice-row>.choice.wrong{background:#fbefed;border-color:#b96b60}

/* 보강 도식의 PC 표시만 조정합니다. 기존 모바일 규칙은 유지합니다. */
@media(min-width:681px){
 .support-detail-visual .flow-layout{grid-template-columns:minmax(0,1.05fr) minmax(315px,.95fr);gap:18px}
 .support-detail-visual .flow-drawing svg .support-label{font-size:20px;font-weight:600;fill:#294651}
 .support-detail-visual .flow-drawing svg .support-small{font-size:18px;font-weight:400;fill:#385462}
 .support-detail-visual .flow-drawing svg .support-number{font-size:15px;font-weight:700;fill:white}
 .support-detail-visual [role="button"]{cursor:pointer}
 .support-detail-visual [role="button"]:focus-visible{outline:3px solid #e5a530;outline-offset:2px}
}

.real-form-visual .real-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.real-form-visual h3{font-size:17px;margin:0 0 12px}
.real-form-visual .real-photo,.real-form-visual .real-cutaway{display:block;width:100%;height:auto;max-height:640px}
.real-form-visual .real-photo{overflow:hidden}
.real-form-visual .real-cutaway text{font-family:inherit;fill:#243e49}
.real-form-visual .real-photo text{font-family:inherit}
.real-form-visual .real-form-key p{font-size:16px;line-height:1.75;margin:0 0 18px}
.real-form-visual .real-form-key b,.real-form-visual .real-part-map b{display:block;margin-bottom:5px}
.real-form-visual .real-part-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:18px}
.real-form-visual .real-part-map p{font-size:15px;line-height:1.7;margin:0}
.real-form-visual .real-functions{margin-top:18px}
.real-form-visual .real-functions p{margin-bottom:12px}
.real-form-visual .real-pump-exploded{display:block;width:100%;height:auto;max-height:650px;object-fit:contain}
.real-form-visual .real-original{margin:14px 0;border-top:1px solid #d9e2e5;padding-top:12px}
.real-form-visual .real-original summary{cursor:pointer;font-size:15px;line-height:1.6}
.real-form-visual .real-original img{display:block;width:100%;height:auto;margin-top:12px}
.real-form-visual .credit{overflow-wrap:anywhere}
@media(max-width:680px){.real-form-visual .real-form-grid,.real-form-visual .real-part-map{grid-template-columns:minmax(0,1fr)}.real-form-visual .real-form-grid{gap:20px}}

}
.ex-native-figure{margin:18px 0;max-width:100%;min-width:0;overflow:hidden}.ex-native-figure>.visual{margin:0}.ex-native-figure .flow-buttons{position:static}.ex-native-figure .flow-drawing{overflow:auto;overscroll-behavior-x:contain}.ex-native-figure .flow-drawing:focus-visible{outline:3px solid #2563eb}.ex-native-caption{font-size:15px;line-height:1.6;color:#536578;margin-top:12px}.ex-native-figure button{min-height:44px}.ex-native-figure a{overflow-wrap:anywhere}
@media(max-width:600px){.ex-native-figure .flow-layout{display:block}.ex-native-figure .flow-drawing{max-width:100%;overflow:auto}.ex-native-figure .flow-drawing>svg{min-width:500px;max-width:none}.ex-native-figure .flow-side{min-width:0}.ex-native-figure .flow-buttons{display:flex;flex-wrap:wrap}}