/* 새 강의 화면과 공급망 표 공통 스타일. 색·간격·모서리는 styles.css 첫 줄 :root 토큰만 쓴다.
   lp- = 강의 화면(lesson page). supply-·evidence·robot-count = 공급망 표(supply-ui.mjs), 공급망 지도·기업 화면도 함께 쓴다. */

/* ── 화면 틀 ─────────────────────────────── */
.lp{display:grid;grid-template-columns:minmax(0,880px) 188px;gap:var(--s12);justify-content:center;padding-top:var(--s10);word-break:keep-all;overflow-wrap:anywhere}
.lp-is-planned{grid-template-columns:minmax(0,760px)}
.lp-article{min-width:0}
.lp-hero,.lp-section{scroll-margin-top:112px}
.lp-section{padding:var(--s12) 0;border-top:1px solid var(--line)}
.lp-section h2{font-size:28px;line-height:1.35;letter-spacing:-.03em;max-width:720px}
.lp-section h3{letter-spacing:-.02em}
.lp-step{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue);margin-bottom:var(--s3);font-variant-numeric:tabular-nums}
.lp-lead{margin-top:var(--s3);max-width:720px;color:var(--muted);font-size:15px}
.lp-label{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--blue);margin-bottom:var(--s2)}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lp-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}

/* 오른쪽 차례 */
.lp-toc{position:sticky;top:112px;padding-top:var(--s4)}
.lp-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.lp-toc a{display:flex;gap:var(--s2);align-items:center;min-height:44px;padding:0 var(--s4);margin-left:-1px;border-left:2px solid transparent;font-size:13px;color:var(--muted)}
.lp-toc a:hover{color:var(--ink);border-left-color:var(--blue)}
.lp-toc span{font-size:11px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}

/* ── 01 뜯어볼 부품 ─────────────────────────── */
.lp-hero{padding:var(--s8) 0 var(--s12)}
.lp-eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue);font-variant-numeric:tabular-nums;margin-bottom:var(--s4)}
.lp-hero h1{font-size:clamp(32px,4vw,46px);line-height:1.25;letter-spacing:-.045em;max-width:760px}
.lp-hero .lp-step{margin:var(--s8) 0 var(--s2)}
.lp-oneline{max-width:720px;padding-left:var(--s4);border-left:3px solid var(--blue);font-size:20px;line-height:1.65;font-weight:500}
.lp-done-tag{display:inline-flex;margin-top:var(--s4);padding:var(--s1) var(--s3);border-radius:var(--r3);background:var(--green-soft);color:var(--green);font-size:12px;font-weight:700}
.lp-planned-badge{display:inline-flex;margin-top:var(--s4);padding:var(--s1) var(--s3);border:1px dashed var(--metal-dark);border-radius:var(--r3);font-size:12px;font-weight:700;color:var(--muted)}
.lp-planned{display:inline-flex;align-items:center;padding:0 var(--s1);border:1px dashed var(--metal-dark);border-radius:4px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}

.lp-path{margin-top:var(--s8)}
.lp-path-label{font-size:12px;color:var(--muted);margin-bottom:var(--s3)}
.lp-path ol{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s2)}
.lp-path li{display:flex}
.lp-path-item{display:flex;flex-direction:column;gap:var(--s1);width:100%;min-height:76px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);font-size:13px;line-height:1.45;transition:border-color var(--fast)}
a.lp-path-item:hover{border-color:var(--blue);color:var(--ink)}
.lp-path-number{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.lp-path li[data-state=current] .lp-path-item{border-color:var(--blue);background:var(--blue-soft)}
.lp-path li[data-state=current] .lp-path-number{color:var(--blue)}
.lp-path li[data-state=done] .lp-path-number{color:var(--green)}
.lp-path li[data-state=done] .lp-path-number::after{content:" ✓"}
.lp-path li[data-state=planned] .lp-path-item{background:transparent;border-style:dashed;color:var(--muted)}

/* ── 02 3D 분해 ────────────────────────────── */
.lp-model-bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s6) 0 var(--s3)}
.lp-variants{display:flex;flex-wrap:wrap;gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface)}
.lp-toggle{min-height:44px;padding:var(--s2) var(--s4);border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;transition:background var(--fast),color var(--fast)}
.lp-toggle:hover{color:var(--ink)}
.lp-variants .lp-toggle[aria-pressed=true]{background:var(--blue);color:var(--surface)}
.lp-play{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.lp-play::before{content:"";width:0;height:0;border-left:9px solid var(--blue);border-top:6px solid transparent;border-bottom:6px solid transparent}
.lp-scene{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.lp-scene-fallback{padding:var(--s8) var(--s6);font-size:14px;color:var(--muted);text-align:center}
.lp-model-notice{margin-top:var(--s2);font-size:12px;color:var(--muted)}
.lp-scene[data-loaded=true]+.lp-model-notice{display:none}

.lp-parts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s6);margin-top:var(--s6);align-items:start}
.lp-part-buttons{display:flex;flex-wrap:wrap;gap:var(--s2);align-content:start}
.lp-part-button{min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r3);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.lp-part-button:hover{border-color:var(--blue);color:var(--blue)}
.lp-part-button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.lp-part-detail{min-height:168px;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-part-hint,.lp-flow-hint{font-size:14px;color:var(--muted)}
.lp-part-card h3{font-size:18px;margin-bottom:var(--s2)}
.lp-part-card p{font-size:15px}
.lp-part-supply{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.lp-chip{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--paper);font-size:13px;font-weight:600;color:var(--blue);line-height:1.4}
a.lp-chip:hover{border-color:var(--blue)}
.lp-part-supply-none{margin-top:var(--s3);font-size:13px;color:var(--muted)}

/* ── 02 형식별 2단 (lesson-figure.mjs, figures/*.mjs) ─────
   overview = 해부도와 장 카드, flow = 단계 흐름도, reading = 학습용 가상 문서 읽기. part는 위의 3D 분해 규칙을 쓴다. */
.lp-regions{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.lp-region{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);overflow:hidden;transition:border-color var(--fast),box-shadow var(--fast)}
.lp-region:has([aria-pressed=true]){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.lp-region-button{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:var(--s1);width:100%;min-height:44px;padding:var(--s4);border:0;background:transparent;color:var(--ink);text-align:left;transition:background var(--fast)}
.lp-region-button:hover{background:var(--wash)}
.lp-region-button[aria-pressed=true]{background:var(--blue-soft)}
.lp-region-number{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.lp-region-title{font-size:18px;font-weight:750;letter-spacing:-.02em}
.lp-region-role{font-size:13px;line-height:1.65;color:var(--muted)}
.lp-region-button[aria-pressed=true] .lp-region-role{color:var(--ink)}
.lp-region-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s4);border-top:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.45;color:var(--blue)}
a.lp-region-link::after{content:"→";content:"→" / "";flex:none}
a.lp-region-link:hover{background:var(--blue-soft);color:var(--blue)}
.lp-region-link.is-current{color:var(--muted)}

.lp .flow{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s6)}
.lp-flow-item{position:relative;display:flex}
/* 단계 사이 화살표. 화면 낭독기에는 읽히지 않게 대체 글을 비운다. */
.lp-flow-item:not(:last-child)::after{content:"→";content:"→" / "";position:absolute;top:50%;right:calc(var(--s6) / -2);transform:translate(50%,-50%);font-size:16px;line-height:1;color:var(--metal-dark)}
.lp-flow-button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);width:100%;min-height:88px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;line-height:1.45;text-align:left;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.lp-flow-button:hover{border-color:var(--blue)}
.lp-flow-number{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--wash);font-size:12px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.lp-flow-button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:var(--surface)}
.lp-flow-button[aria-pressed=true] .lp-flow-number{background:var(--surface)}
.lp-flow-detail{min-height:132px;margin-top:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-flow-body p:last-child{max-width:720px;font-size:15px;line-height:1.8}

.lp-reading-status{margin-top:var(--s5);font-size:14px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.lp-doc{margin-top:var(--s3);padding:var(--s6);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-doc-tag{display:inline-flex;padding:1px var(--s2);border-radius:4px;background:var(--orange-soft);color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.04em}
.lp-doc h3{margin-top:var(--s3);font-size:20px;line-height:1.5}
.lp-doc-kind{margin-top:var(--s1);font-size:12px;color:var(--muted)}
.lp-doc-blocks{list-style:none;margin:var(--s5) 0 0;padding:var(--s5) 0 0;display:grid;gap:var(--s2);border-top:1px solid var(--line)}
.lp-doc-button{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--s4);align-items:start;width:100%;min-height:48px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.7;text-align:left;transition:background var(--fast),border-color var(--fast)}
.lp-doc-button:hover{border-color:var(--blue)}
.lp-doc-button[aria-expanded=true]{border-color:var(--blue);background:var(--blue-soft)}
.lp-doc-label{padding-top:3px;font-size:12px;font-weight:700;line-height:1.5;color:var(--muted)}
.lp-doc-block[data-read=true] .lp-doc-label{color:var(--green)}
.lp-doc-block[data-read=true] .lp-doc-label::after{content:" ✓";content:" ✓" / " 읽음"}
.lp-doc-explain{margin-top:var(--s2);padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--wash);box-shadow:inset 3px 0 0 var(--blue)}
.lp-doc-explain p:last-child{font-size:14px;line-height:1.75}

/* lab 형식(figures/lab.mjs): 비교 조건·움직여 보기·처음으로 줄은 3D 분해의 .lp-model-bar·.lp-toggle을 그대로 쓰고, 조절기·결과·가정만 여기서 꾸민다. */
.lp-lab-reset{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.lp-lab-reset:hover{border-color:var(--blue);color:var(--blue)}
.lp-lab-notice{margin-top:var(--s2);font-size:12px;color:var(--muted)}
/* 조절기와 결과가 3D와 한 화면에 들어오도록 실험 장면은 다른 3D보다 낮다(공용 3D 높이 규칙보다 구체적으로 적는다). */
.lp-lab-scene.three-scene[data-kind] .three-viewport{height:480px}
.lp-lab-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin-top:var(--s6);align-items:start}
.lp-lab-controls{display:grid;gap:var(--s5);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-lab-control{display:grid;gap:var(--s2)}
.lp-lab-control-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:14px;font-weight:600}
.lp-lab-control output{font-size:16px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-lab-control input[type=range]{height:44px;min-height:44px}
.lp-lab-control select{min-height:44px}
.lp-lab-scale{display:flex;justify-content:space-between;gap:var(--s3);font-size:12px;color:var(--muted)}
.lp-lab-result{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);box-shadow:inset 3px 0 0 var(--blue)}
.lp-lab-result[data-state=success]{box-shadow:inset 3px 0 0 var(--green)}
.lp-lab-result[data-state=warning]{box-shadow:inset 3px 0 0 var(--orange)}
.lp-lab-headline{font-size:16px;font-weight:700;line-height:1.6}
.lp-lab-result[data-state=success] .lp-lab-headline::before{content:"✓ ";content:"✓ " / "";color:var(--green)}
.lp-lab-result[data-state=warning] .lp-lab-headline::before{content:"! ";content:"! " / "";color:var(--orange)}
.lp-lab-readouts{display:grid;gap:var(--s3);margin:var(--s4) 0 0}
.lp-lab-readout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);align-items:baseline;padding-top:var(--s3);border-top:1px solid var(--line)}
.lp-lab-readout dt{font-size:13px;font-weight:600;color:var(--muted)}
.lp-lab-value{margin:0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.lp-lab-value[data-unavailable]{font-size:15px;font-weight:600;color:var(--muted)}
.lp-lab-plain{grid-column:1/-1;margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.lp-lab-assumptions{margin-top:var(--s4);padding:var(--s4) var(--s5);border:1px dashed var(--metal-dark);border-radius:var(--r2)}
.lp-lab-assumptions ul{margin:0;padding-left:var(--s5)}
.lp-lab-assumptions li{font-size:13px;line-height:1.7;color:var(--muted)}
.lp-lab-assumptions li+li{margin-top:var(--s1)}
.lp-lab-model-note{margin-top:var(--s3);font-size:12px;color:var(--muted)}

/* ── 03 원리 ──────────────────────────────── */
.lp-prose{max-width:720px;margin-top:var(--s2)}
.lp-prose p{margin-top:var(--s4);font-size:17px;line-height:1.85}
.lp-analogy{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s8)}
.lp-callout{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-callout p{font-size:15px}
.lp-callout .lp-label{font-size:12px}
.lp-callout.is-limit .lp-label{color:var(--orange)}
.lp-callout.is-contrast{margin-top:var(--s6);border-color:transparent;background:var(--wash)}
.lp-callout.is-contrast .lp-label{color:var(--green)}

/* ── 04 방식 비교 ───────────────────────────── */
.lp-methods{width:100%;margin-top:var(--s6);border-collapse:collapse;font-size:14px;line-height:1.6}
.lp-methods caption,.supply-table caption{caption-side:top;text-align:left;font-size:12px;color:var(--muted);padding-bottom:var(--s3)}
.lp-methods th,.lp-methods td{padding:var(--s3);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lp-methods thead th{font-size:12px;font-weight:600;color:var(--muted);border-bottom-color:var(--ink)}
.lp-methods tbody th{width:132px;font-weight:700}
.lp-method-link{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center}
.lp-method-link:hover{color:var(--ink)}
.lp-method-lesson{font-size:12px;font-weight:600;color:var(--blue)}
.lp-method-link:hover .lp-method-lesson{text-decoration:underline;text-underline-offset:3px}

/* ── 05 공급망 표 (supply-ui.mjs) ─────────────── */
.supply-block{margin-top:var(--s6)}
.supply-disclaimer{padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--wash);font-size:13px;font-weight:600}
.supply-rule{margin-top:var(--s3);padding-left:var(--s3);border-left:3px solid var(--blue);font-size:13px;line-height:1.6}
.evidence-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s4) 0 0;font-size:12px;color:var(--muted)}
.evidence-legend div{display:flex;gap:var(--s2);align-items:center}
.evidence-legend dt,.evidence-legend dd{margin:0}
.evidence{display:inline-flex;align-items:center;padding:1px var(--s2);border-radius:4px;font-size:11px;font-weight:700;line-height:1.7;white-space:nowrap}
.evidence-confirmed{background:var(--green-soft);color:var(--green)}
.evidence-unnamed{background:var(--blue-soft);color:var(--blue)}
.evidence-reported{background:var(--orange-soft);color:var(--orange)}
.source-link{color:var(--blue);font-size:12px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

.supply-table{width:100%;margin-top:var(--s5);border-collapse:collapse;font-size:14px;line-height:1.6}
.supply-table thead th{padding:var(--s2) var(--s3);font-size:12px;font-weight:600;color:var(--muted);text-align:left;border-bottom:1px solid var(--ink)}
.supply-table th,.supply-table td{padding:var(--s3);text-align:left;vertical-align:top}
.supply-table tbody>tr>*{transition:background var(--fast)}
.supply-table tbody>tr:not(.supply-method-row){border-top:1px solid var(--line)}
.supply-method-row th{padding-top:var(--s8);font-weight:400}
.supply-table tbody:first-of-type .supply-method-row th{padding-top:var(--s5)}
.supply-method-row th:focus{outline:none}
.supply-method-row th:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.supply-method-name{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.supply-method-plain{display:block;max-width:680px;margin-top:var(--s1);font-size:13px;color:var(--muted)}
.supply-uses-label{display:inline-block;margin-top:var(--s3);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.supply-uses{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;gap:2px;font-size:13px}
.supply-uses-none{margin-top:var(--s1);font-size:13px;color:var(--muted)}
.supply-basis{font-size:12px;color:var(--muted)}
.supply-use-note{display:block;margin:2px 0 var(--s1);font-size:12px;line-height:1.6;color:var(--muted)}
.supply-table th[scope=row]{width:24%;font-weight:700}
.supply-table th[scope=row] a{display:inline-block;padding:var(--s3) 0;margin:calc(var(--s3) * -1) 0;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.supply-table th[scope=row] a:hover{text-decoration-color:var(--blue)}
.supply-table td[data-label=국가]{white-space:nowrap;color:var(--muted)}
.supply-table td[data-label=상장]{white-space:nowrap;font-variant-numeric:tabular-nums}
.supply-table tbody>tr.supply-makers-row{border-top:0}
.supply-makers-row td{padding:var(--s2) var(--s3) var(--s1);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.supply-links{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.supply-links li{font-size:13px;line-height:1.7}
.supply-links .evidence{margin-right:var(--s1)}
.supply-method-unstated{display:inline-flex;padding:0 var(--s1);border:1px solid var(--metal-dark);border-radius:4px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.supply-none{font-size:13px;color:var(--muted)}
/* 부품을 고르면 그 부품의 방식이 강조된다(lesson-page.mjs가 aria-current를 붙인다). */
.supply-table tbody[aria-current=true]>tr>*{background:var(--blue-soft)}
.supply-table tbody[aria-current=true]>tr>:first-child{box-shadow:inset 3px 0 0 var(--blue)}

.lp-subhead{margin-top:var(--s10);font-size:20px}
.lp-note{margin-top:var(--s2);font-size:13px;color:var(--muted)}
.robot-counts{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3)}
.robot-count{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.robot-count-name{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:13px;font-weight:700}
.robot-count-tag{padding:0 var(--s1);border-radius:4px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:600}
.robot-count-value{font-size:34px;font-weight:750;line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.robot-count.is-unknown .robot-count-value{font-size:24px;color:var(--muted)}
.robot-count-note{font-size:13px;line-height:1.65;color:var(--muted)}
.robot-count .source-link{margin-top:auto;padding-top:var(--s1)}
.lp-more{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.lp-more-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);font-size:14px;font-weight:600}
.lp-more-link::after{content:"→";content:"→" / "";color:var(--blue)}

/* ── 06 투자자 관점 ─────────────────────────── */
.lp-investor{margin-top:var(--s5);padding:var(--s6);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r2);background:var(--surface)}
.lp-investor p{max-width:720px;font-size:17px;line-height:1.85}

/* ── 07 뉴스 해부 연습 ───────────────────────── */
.lp-news-card{margin:var(--s5) 0 0;padding:var(--s6);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-news-tag{display:inline-flex;padding:1px var(--s2);border-radius:4px;background:var(--orange-soft);color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.04em}
.lp-news-card blockquote{margin:var(--s3) 0 0}
.lp-news-card blockquote p{font-size:20px;font-weight:700;line-height:1.5;letter-spacing:-.02em}
.lp-news-checks{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.lp-check{display:flex;gap:var(--s3);align-items:flex-start;width:100%;min-height:48px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:15px;line-height:1.6;text-align:left;transition:background var(--fast),border-color var(--fast)}
.lp-check:hover{border-color:var(--blue)}
.lp-check[aria-disabled=true]{cursor:default}
.lp-check-box{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border:2px solid var(--metal-dark);border-radius:4px;background:var(--surface)}
.lp-check[aria-pressed=true]{border-color:var(--blue);background:var(--blue-soft)}
.lp-check[aria-pressed=true] .lp-check-box{border-color:var(--blue);background:var(--blue)}
.lp-check[aria-pressed=true] .lp-check-box::after{content:"";width:10px;height:5px;border-left:2px solid var(--surface);border-bottom:2px solid var(--surface);transform:translateY(-1px) rotate(-45deg)}
.lp-news-why{margin-top:var(--s2);padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--wash);font-size:14px;line-height:1.7}
.lp-verdict{display:block;margin-bottom:var(--s1);font-size:12px}
.lp-news-item[data-verdict=hit] .lp-verdict,.lp-news-item[data-verdict=avoided] .lp-verdict{color:var(--green)}
.lp-news-item[data-verdict=missed] .lp-verdict,.lp-news-item[data-verdict=trap] .lp-verdict{color:var(--orange)}
.lp-news-item[data-verdict=hit] .lp-news-why,.lp-news-item[data-verdict=avoided] .lp-news-why{box-shadow:inset 3px 0 0 var(--green)}
.lp-news-item[data-verdict=missed] .lp-news-why,.lp-news-item[data-verdict=trap] .lp-news-why{box-shadow:inset 3px 0 0 var(--orange)}
.lp-result{margin-top:var(--s3);font-size:14px;font-weight:600}
/* 상태 영역은 비어 있어도 그려 둔다(숨겼다가 같은 순간에 글을 넣으면 화면 낭독기가 놓친다). */
.lp-result:empty,.lp-feedback:empty{margin-top:0}

/* ── 08 퀴즈와 다음 부품 ─────────────────────── */
.lp-quiz{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s4);counter-reset:quiz}
.lp-question{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);counter-increment:quiz}
.lp-question-text{font-size:17px;font-weight:700;line-height:1.55}
.lp-question-text::before{content:"Q" counter(quiz) ". ";color:var(--blue)}
.lp-options{display:grid;gap:var(--s2);margin-top:var(--s4)}
.lp-option{display:flex;gap:var(--s3);align-items:flex-start;min-height:48px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:15px;line-height:1.6;text-align:left;transition:background var(--fast),border-color var(--fast)}
.lp-option:hover{border-color:var(--blue)}
.lp-option-letter{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--wash);font-size:12px;font-weight:700}
.lp-option[aria-pressed=true]{border-color:var(--orange);background:var(--orange-soft)}
.lp-option[aria-pressed=true] .lp-option-letter{background:var(--orange);color:var(--surface)}
.lp-question:has(.lp-feedback[data-result=right]) .lp-option[aria-pressed=true]{border-color:var(--green);background:var(--green-soft)}
.lp-question:has(.lp-feedback[data-result=right]) .lp-option[aria-pressed=true] .lp-option-letter{background:var(--green)}
.lp-feedback{margin-top:var(--s3);font-size:14px;line-height:1.7}
.lp-feedback[data-result=right]{color:var(--green)}
.lp-feedback[data-result=wrong]{color:var(--orange)}
.lp-complete{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r2);background:var(--green-soft);color:var(--green)}
.lp-complete strong{font-size:16px}
.lp-complete span{font-size:14px;color:var(--ink)}
.lp-next{margin-top:var(--s6);padding:var(--s6);border-radius:var(--r2);background:var(--ink);color:var(--surface)}
.lp-next .lp-label{color:var(--blue-soft)}
.lp-next p:last-child{font-size:18px;line-height:1.7}
.lp-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.lp-pager-link{display:flex;flex-direction:column;gap:var(--s1);min-height:76px;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);transition:border-color var(--fast)}
.lp-pager-link:hover{border-color:var(--blue);color:var(--ink)}
.lp-pager-link.is-next{grid-column:2;align-items:flex-end;text-align:right}
.lp-pager-label{display:flex;gap:var(--s2);align-items:center;font-size:12px;color:var(--muted)}
.lp-pager-title{font-size:15px;font-weight:700;line-height:1.5}

/* 출처 */
.lp-sources{margin-top:var(--s4);padding-top:var(--s8);border-top:1px solid var(--line)}
.lp-sources h2{font-size:16px;letter-spacing:-.01em}
.lp-sources ol{display:grid;gap:var(--s3);margin:var(--s3) 0 0;padding-left:var(--s5);font-size:13px;color:var(--muted)}
.lp-sources small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}

/* 준비 중 강의 */
.lp-is-planned .lp-oneline{margin-top:var(--s4)}
.lp-is-planned .lp-callout{margin-top:var(--s6)}
.lp-path-item .lp-planned{align-self:flex-start;margin-top:auto}
.lp-is-planned .lp-callout .lp-label{font-size:13px}

/* ── 첫 화면 (home-ui.mjs) ───────────────────
   hm- = 해부도 지도 첫 화면(home map). 왼쪽에 제목과 이어서 듣기, 오른쪽에 3D 해부도, 그 아래 8개 장 카드. */
.hm{padding-top:var(--s8);word-break:keep-all;overflow-wrap:anywhere}
.hm-legacy{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;margin-bottom:var(--s6);padding:var(--s4) var(--s5);border:1px solid var(--blue);border-radius:var(--r2);background:var(--blue-soft)}
.hm-legacy-title{margin-bottom:var(--s1);font-size:16px;font-weight:700}
.hm-legacy div p:last-child{font-size:14px;line-height:1.7}
.hm-legacy-close{flex:none;min-height:44px}

.hm-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s12);align-items:start}
.hm-hero{align-self:center;padding:var(--s8) 0}
.hm-eyebrow{margin-bottom:var(--s4);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.hm-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.2;letter-spacing:-.05em}
.hm-hero h1:focus{outline:none}
.hm-lead{max-width:460px;margin-top:var(--s5);font-size:17px;line-height:1.8;color:var(--muted)}
.hm-continue{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:72px;margin-top:var(--s8);padding:var(--s4) var(--s5);border-radius:var(--r2);background:var(--blue);color:var(--surface);transition:background var(--fast),transform var(--fast)}
.hm-continue:hover{background:var(--ink);color:var(--surface)}
.hm-continue:active{transform:scale(.99)}
.hm-continue-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-continue-label{font-size:18px;font-weight:750;letter-spacing:-.02em}
.hm-continue-title{font-size:14px;line-height:1.5;color:var(--blue-soft)}
.hm-continue-arrow{flex:none;font-size:22px;transition:transform var(--fast)}
.hm-continue:hover .hm-continue-arrow{transform:translateX(4px)}
.hm-progress{margin-top:var(--s4);font-size:14px;color:var(--muted)}
.hm-progress strong{color:var(--ink);font-variant-numeric:tabular-nums}
.hm-caught-up{margin-top:var(--s8);padding:var(--s4) var(--s5);border-radius:var(--r2);background:var(--wash);font-size:15px;font-weight:600}
.hm-badge{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s8);padding:var(--s4) var(--s5);border:1px solid var(--green);border-radius:var(--r2);background:var(--green-soft)}
.hm-badge-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--surface);font-size:20px;font-weight:700}
.hm-badge strong{font-size:20px;letter-spacing:-.02em;color:var(--green)}
.hm-badge p{font-size:14px}

.hm-map{min-width:0}
.hm-scene{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.hm-scene-fallback{padding:var(--s8) var(--s6);font-size:14px;color:var(--muted);text-align:center}
.hm-model-notice{margin-top:var(--s2);font-size:12px;color:var(--muted)}
.hm-scene[data-loaded=true]+.hm-model-notice{display:none}
.hm-hint{margin-top:var(--s2);font-size:13px;color:var(--muted)}
.hm-model-credit{font-size:12px;color:var(--muted)}
.hm-model-credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

.hm-chapters{margin-top:var(--s16);padding-top:var(--s10);border-top:1px solid var(--line)}
.hm-chapters-head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);align-items:baseline;justify-content:space-between}
.hm-chapters-head h2{font-size:28px;letter-spacing:-.03em}
.hm-all-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:14px;font-weight:600;color:var(--blue)}
.hm-all-link::after{content:"→";content:"→" / ""}
.hm-all-link:hover{color:var(--ink)}
.hm-chapter-list{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.hm-chapter-list li{display:flex}
.hm-chapter{display:flex;flex-direction:column;gap:var(--s2);width:100%;min-height:208px;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);transition:border-color var(--fast),background var(--fast)}
a.hm-chapter:hover{border-color:var(--blue);color:var(--ink)}
.hm-chapter-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.hm-chapter-number{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.hm-chapter-state{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.hm-chapter-title{font-size:21px;font-weight:750;letter-spacing:-.03em}
.hm-chapter-summary{font-size:13px;line-height:1.65;color:var(--muted)}
.hm-chapter-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:auto;padding-top:var(--s3)}
.hm-dots{display:flex;flex-wrap:wrap;gap:4px}
.hm-dot{width:10px;height:10px;border:2px solid var(--blue);border-radius:50%}
.hm-dot[data-dot=done]{border-color:var(--green);background:var(--green)}
.hm-dot[data-dot=planned]{border:1px dashed var(--metal-dark)}
.hm-chapter-count{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hm-chapter[data-state=in-progress] .hm-chapter-state,.hm-chapter[data-state=next] .hm-chapter-state{color:var(--blue)}
.hm-chapter[data-state=in-progress],.hm-chapter[data-state=next]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.hm-chapter[data-state=in-progress] .hm-chapter-summary,.hm-chapter[data-state=next] .hm-chapter-summary,.hm-chapter[data-state=done] .hm-chapter-summary{color:var(--ink)}
.hm-chapter[data-state=done]{border-color:var(--green);background:var(--green-soft)}
.hm-chapter[data-state=done] .hm-chapter-state{color:var(--green)}
.hm-chapter[data-state=done] .hm-chapter-state::before{content:"✓ "}
.hm-chapter[data-state=planned]{border-style:dashed}

/* ── 학습 과정 (home-ui.mjs) ─────────────────
   cur- = 8장 전체 강의 목록(curriculum). 장마다 #chapter-<id> 자리가 있어 준비 중 강의 화면이 여기로 연결한다. */
.cur{max-width:880px;margin:0 auto;padding-top:var(--s10);word-break:keep-all;overflow-wrap:anywhere}
.cur-head{padding:var(--s8) 0 var(--s6)}
.cur-eyebrow{margin-bottom:var(--s4);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.cur-head h1{font-size:clamp(30px,4vw,44px);line-height:1.25;letter-spacing:-.045em}
.cur-lead{max-width:640px;margin-top:var(--s4);font-size:16px;color:var(--muted)}
.cur-progress{margin-top:var(--s4);font-size:14px;color:var(--muted)}
.cur-progress strong{color:var(--ink);font-variant-numeric:tabular-nums}
.cur-search{display:grid;gap:var(--s2);max-width:420px;font-size:13px;font-weight:600;color:var(--muted)}
.cur-status{margin-top:var(--s3);font-size:14px;color:var(--muted)}
.cur-chapter{padding:var(--s10) 0 var(--s2);border-top:1px solid var(--line);scroll-margin-top:112px}
.cur-chapter-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num title count" ". summary summary";column-gap:var(--s4);row-gap:var(--s1);align-items:baseline}
.cur-chapter-number{grid-area:num;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.cur-chapter-head h2{grid-area:title;font-size:26px;letter-spacing:-.03em}
.cur-chapter-count{grid-area:count;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.cur-chapter[data-state=done] .cur-chapter-count{color:var(--green)}
.cur-chapter[data-state=done] .cur-chapter-count::before{content:"✓ "}
.cur-chapter-summary{grid-area:summary;max-width:640px;font-size:14px;color:var(--muted)}
.cur-lessons{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.cur-lesson{display:flex;gap:var(--s4);align-items:center;min-height:56px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);transition:border-color var(--fast)}
a.cur-lesson:hover{border-color:var(--blue);color:var(--ink)}
.cur-lesson-number{flex:none;width:28px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.cur-lesson-title{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.5}
.cur-mark{flex:none;padding:1px var(--s2);border-radius:4px;font-size:12px;font-weight:700}
.cur-mark.is-done{background:var(--green-soft);color:var(--green)}
.cur-mark.is-done::before{content:"✓ "}
.cur-mark.is-next{background:var(--blue-soft);color:var(--blue)}
.cur-lessons li[data-state=planned] .cur-lesson{border-style:dashed;background:transparent;color:var(--muted)}
.cur-lessons li[data-state=planned] .cur-lesson-number{color:var(--muted)}

@media(max-width:1100px){
  .lp{grid-template-columns:minmax(0,880px)}
  .lp-aside{display:none}
}
@media(max-width:900px){
  .lp-hero,.lp-section{scroll-margin-top:152px}
}
@media(max-width:760px){
  .lp-parts,.lp-analogy{grid-template-columns:1fr}
  .lp-lab-panel{grid-template-columns:minmax(0,1fr)}
  .lp-part-detail{min-height:0}
  .lp-regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 흐름도는 세로로 세우고 화살표를 아래로 돌린다. */
  .lp .flow{grid-auto-flow:row;grid-auto-columns:auto;gap:var(--s5)}
  .lp-flow-item:not(:last-child)::after{content:"↓";content:"↓" / "";top:auto;right:auto;bottom:calc(var(--s5) / -2);left:50%;transform:translate(-50%,50%)}
  .lp-flow-button{flex-direction:row;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);font-size:15px}
  .lp-flow-detail{min-height:0}
  .lp-methods thead{display:none}
  .lp-methods caption{display:block}
  .lp-methods,.lp-methods tbody,.lp-methods tr,.lp-methods th,.lp-methods td{display:block;width:auto}
  .lp-methods tr{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
  .lp-methods th,.lp-methods td{padding:0;border:0}
  .lp-methods tbody th{width:auto;font-size:16px;margin-bottom:var(--s2)}
  .lp-methods td{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
  .lp-methods td::before{content:attr(data-label);font-size:12px;font-weight:600;color:var(--muted)}
}
@media(max-width:600px){
  .lp{padding-top:var(--s4)}
  .lp-hero{padding:var(--s5) 0 var(--s10)}
  .lp-hero h1{font-size:30px}
  .lp-hero .lp-step{margin-top:var(--s6)}
  .lp-path ol{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-path-item{min-height:68px;padding:var(--s2) var(--s3)}
  .lp-oneline{font-size:17px}
  .lp-section{padding:var(--s10) 0}
  .lp-section h2{font-size:23px}
  .lp-prose p,.lp-investor p{font-size:16px}
  .lp-play{margin-left:0}
  .lp-investor,.lp-news-card{padding:var(--s5)}
  .lp-regions{grid-template-columns:minmax(0,1fr)}
  .lp-flow-detail{padding:var(--s4)}
  .lp-lab-scene.three-scene[data-kind] .three-viewport{height:380px}
  /* 비교 조건 묶음은 한 줄을 다 쓰고, 움직여 보기·처음으로는 그 아래 한 줄을 반씩 나눈다. */
  .lp-lab-bar .lp-variants{flex:1 0 100%}
  .lp-lab-bar .lp-variants .lp-toggle,.lp-lab-bar>.lp-toggle{flex:1}
  .lp-lab-controls,.lp-lab-result,.lp-lab-assumptions{padding:var(--s4)}
  .lp-lab-value{font-size:20px}
  /* 문서 블록은 이름 아래에 본문을 두는 카드로 쌓는다. */
  .lp-doc{padding:var(--s4)}
  .lp-doc h3{font-size:18px}
  .lp-doc-button{grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s3)}
  .lp-doc-label{padding-top:0}
  .lp-news-card blockquote p{font-size:17px}
  .lp-question{padding:var(--s4)}
  .lp-next{padding:var(--s5)}
  .lp-next p:last-child{font-size:16px}
  .lp-pager{grid-template-columns:1fr}
  .lp-pager-empty{display:none}
  .lp-pager-link.is-next{grid-column:auto;align-items:flex-start;text-align:left}
  /* 공급망 표: 행을 카드처럼 세로로 쌓는다. */
  .supply-table thead{display:none}
  .supply-table caption{display:block}
  .supply-table,.supply-table tbody,.supply-table tr,.supply-table th,.supply-table td{display:block;width:auto}
  .supply-table th,.supply-table td{padding:0}
  .supply-method-row th,.supply-table tbody:first-of-type .supply-method-row th{padding:var(--s6) var(--s3) var(--s3)}
  .supply-table tbody>tr:not(.supply-method-row){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2) var(--s3);padding:var(--s3)}
  .supply-table th[scope=row],.supply-table td[data-label="공급 관계"],.supply-table td.supply-none,.supply-makers-row td{grid-column:1/-1;width:auto}
  .supply-table tbody>tr.supply-makers-row{padding-bottom:0}
  .supply-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;color:var(--muted)}
  .supply-table td[data-label=국가],.supply-table td[data-label=상장]{white-space:normal}
  .supply-table th[scope=row] a{font-size:15px}
  .supply-table tbody[aria-current=true]{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
  .supply-table tbody[aria-current=true]>tr>*,.supply-table tbody[aria-current=true]>tr>:first-child{background:transparent;box-shadow:none}
  .robot-count-value{font-size:30px}
}

/* ── 나의 학습 (app.mjs) ─────────────────────
   pg- = 나의 학습(progress). 머리글·줄은 학습 과정(cur-)을, 이어서 듣기는 첫 화면(hm-continue)을 그대로 쓴다. */
.pg-section{padding:var(--s10) 0 var(--s2);border-top:1px solid var(--line)}
.pg-section h2{font-size:26px;letter-spacing:-.03em}
.pg-count{flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.pg-empty{margin-top:var(--s4);color:var(--muted)}

/* 첫 화면·학습 과정 반응형 */
@media(max-width:1100px){
  .hm-top{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .hm-hero{align-self:start;padding:var(--s4) 0}
  .hm-lead{max-width:640px}
  .hm-chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .cur-chapter{scroll-margin-top:152px}
}
@media(max-width:600px){
  .hm{padding-top:var(--s4)}
  .hm-legacy{flex-direction:column;align-items:stretch}
  .hm-hero h1{font-size:30px}
  .hm-lead{margin-top:var(--s4);font-size:16px}
  .hm-continue{margin-top:var(--s6);padding:var(--s4)}
  .hm-chapters{margin-top:var(--s10);padding-top:var(--s8)}
  .hm-chapters-head h2{font-size:23px}
  .hm-chapter-list{grid-template-columns:minmax(0,1fr)}
  .hm-chapter{min-height:0}
  .cur{padding-top:var(--s4)}
  .cur-chapter-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num count" "title title" "summary summary"}
  .cur-chapter-head h2{font-size:23px}
  .cur-lesson{align-items:flex-start;flex-wrap:wrap}
  .cur-lesson-title{flex-basis:calc(100% - 28px - var(--s4))}
  .cur-mark,.cur-lesson .lp-planned{margin-left:calc(28px + var(--s4))}
}

/* ── 공급망 지도 (supply-map.mjs) ─────────────
   sm- = 로봇 → 부품 → 방식 → 기업으로 펼치는 한 장짜리 지도. 단계 표시(.evidence)·공급 관계 목록(.supply-links)·고지 문구(.supply-disclaimer)는 공급망 표와 같은 것을 쓴다. */
.sm{max-width:880px;margin:0 auto;padding-top:var(--s10);word-break:keep-all;overflow-wrap:anywhere}
.sm-head{padding:var(--s8) 0 var(--s6)}
.sm-eyebrow{margin-bottom:var(--s4);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.sm-head h1{font-size:clamp(30px,4vw,44px);line-height:1.25;letter-spacing:-.045em}
.sm-head h1:focus{outline:none}
.sm-lead{max-width:640px;margin-top:var(--s4);font-size:16px;color:var(--muted)}
.sm-head .supply-disclaimer{max-width:640px;margin-top:var(--s4)}
.sm-flow{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:var(--s5) 0 0;padding:0}
.sm-flow li{display:flex;gap:var(--s2);align-items:center;font-size:14px;font-weight:700}
.sm-flow li:not(:last-child)::after{content:"→";content:"→" / "";font-weight:400;color:var(--metal-dark)}

.sm-tools{margin-top:var(--s4)}
.sm-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),220px));gap:var(--s4)}
.sm-filter{display:grid;gap:var(--s2);font-size:13px;font-weight:600;color:var(--muted)}
.sm-filter select{font-size:15px}
.sm-summary{margin-top:var(--s4);font-size:14px;color:var(--muted)}
.sm-summary[data-state=empty]{padding:var(--s3) var(--s4);border:1px dashed var(--metal-dark);border-radius:var(--r1);color:var(--ink)}
.sm-tools+.evidence-legend{margin-top:var(--s5)}

/* 로봇 → 부품 → 방식 → 기업 */
.sm-tree{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
.sm-level{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue)}
.sm-robots{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.sm-robot{display:grid;gap:2px;min-width:200px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface)}
.sm-robot strong{font-size:16px;letter-spacing:-.02em}
.sm-robot span{font-size:13px;color:var(--muted)}
.sm-robot.is-active{border-color:var(--blue);background:var(--blue-soft)}
.sm-robot.is-active span{color:var(--ink)}
.sm-results{margin-top:var(--s6)}
.sm-robot-lead{max-width:640px;margin-bottom:var(--s4);padding:var(--s3) var(--s4);border-left:3px solid var(--blue);background:var(--blue-soft);font-size:14px;color:var(--ink)}
.sm-parts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.sm-part{border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.sm-part.is-planned,.sm-part.is-none{border-style:dashed;background:transparent}
.sm-none{display:inline-flex;align-items:center;padding:0 var(--s1);border:1px dashed var(--metal-dark);border-radius:4px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.sm-part>details>summary,.sm-part-row{display:flex;gap:var(--s3);align-items:center;min-height:56px;padding:var(--s2) var(--s5)}
.sm-part-note{padding:0 var(--s5) var(--s4);font-size:13px;color:var(--muted)}
.sm-name{font-weight:700;letter-spacing:-.02em}
.sm-part>details>summary .sm-name{font-size:20px}
.sm-count{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.sm summary{list-style:none}
.sm summary::-webkit-details-marker{display:none}
.sm summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform var(--fast)}
.sm details[open]>summary::before{transform:rotate(45deg)}

.sm-methods{list-style:none;margin:0;padding:0 var(--s5) var(--s4) var(--s8);display:grid;gap:var(--s2)}
.sm-method{border-left:2px solid var(--line)}
.sm-method>details>summary{display:flex;gap:var(--s3);align-items:center;min-height:48px;padding:var(--s1) var(--s3)}
.sm-method>details>summary .sm-name{font-size:16px}
.sm-method-body{padding:0 0 var(--s3) var(--s6)}
.sm-plain{max-width:640px;font-size:13px;color:var(--muted)}
.sm-lesson{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:center;min-height:44px;font-size:14px}
.sm-lesson-label{font-size:12px;font-weight:700;color:var(--muted)}
a.sm-lesson .sm-lesson-title{font-weight:600;color:var(--blue);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
a.sm-lesson:hover .sm-lesson-title{text-decoration-color:var(--blue)}
.sm-uses{margin-bottom:var(--s3)}
.sm-uses .supply-uses-label{margin-top:var(--s1)}
.sm-companies-label{margin-top:var(--s3);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.sm-companies{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.sm-company{display:flex;flex-wrap:wrap;gap:0 var(--s4);align-items:center;justify-content:space-between;padding:var(--s1) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--paper)}
.sm-company>.supply-links{flex:1 1 100%;padding-bottom:var(--s3)}
.sm-company-head{display:flex;flex-wrap:wrap;gap:0 var(--s3);align-items:center}
.sm-company-name{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.sm-company-name:hover{text-decoration-color:var(--blue)}
.sm-company-meta{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.sm-empty{margin-top:var(--s2);font-size:13px;color:var(--muted)}

@media(max-width:600px){
  .sm{padding-top:var(--s4)}
  .sm-head{padding-top:var(--s5)}
  .sm-filters{grid-template-columns:minmax(0,1fr)}
  .sm-robot{flex:1 1 100%;min-width:0}
  .sm-part>details>summary,.sm-part-row{flex-wrap:wrap;padding-inline:var(--s4)}
  .sm-part>details>summary .sm-name{font-size:18px}
  .sm-part-note{padding-inline:var(--s4)}
  .sm-methods{padding:0 var(--s3) var(--s3) var(--s3)}
  .sm-method-body{padding-left:var(--s3)}
  .sm-company{padding-inline:var(--s3)}
}

/* ── 기업 목록·기업 화면 (industry-ui.mjs) ─────────
   옛 beginner.css에 있던 기업 화면 규칙을 이 파일로 옮기고(index.html이 beginner.css를 빼도 기업 화면이 그대로 보이게), 상장 표시·만드는 방식·공급 관계 단계·강의 안내 규칙을 더했다.
   단계 표시(.evidence)·범례(.evidence-legend)·고지 문구(.supply-disclaimer)·출처 링크(.source-link)·준비 중 표시(.lp-planned)는 강의 화면과 같은 것을 쓴다. */
.industry-primer{margin-bottom:var(--s12)}
.industry-primer>h2{font-size:28px;margin-bottom:var(--s5)}
.industry-primer>p{font-size:17px;line-height:1.9;max-width:900px}
/* 형광펜 강조. html.mjs highlightedText의 .lesson-highlight도 옛 beginner.css에서 이곳으로 옮겼다. */
.lesson-highlight,.industry-primer mark,.company-profile-heading mark,.industry-evidence-guide mark{color:var(--ink);background:linear-gradient(transparent 12%,#fff0a8 12%,#fff0a8 91%,transparent 91%);padding:0 .12em;font-weight:650;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.company-inline-link{color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:4px}
.industry-role-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s8)}
.industry-role-map button{display:grid;align-content:start;gap:var(--s3);padding:var(--s6);text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r2)}
.industry-role-map button:hover{border-color:var(--blue);background:var(--blue-soft)}
.industry-role-map button>span{font-size:12px;font-weight:650;color:var(--blue)}
.industry-role-map strong{font-size:18px}
.industry-role-map small{font-size:14px;line-height:1.7;color:var(--muted)}
.industry-role-map b{margin-top:var(--s2);font-size:12px;font-weight:600;color:var(--blue)}

/* 찾기 */
.company-filter-panel{display:grid;grid-template-columns:minmax(240px,1fr) 200px 170px auto;gap:var(--s4);align-items:end;padding:var(--s6);background:var(--wash);border-radius:var(--r2)}
.company-filter-panel label{display:grid;gap:var(--s2);font-size:13px}
.company-filter-panel input,.company-filter-panel select{width:100%;min-height:48px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:14px}
.company-lesson-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line);font-size:14px}
.company-lesson-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3);min-height:44px;padding:0 var(--s4);border-radius:var(--r3);background:var(--blue-soft)}
.company-lesson-chip strong{font-size:12px;color:var(--blue)}
.company-lesson-chip a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;text-decoration:underline;text-decoration-color:var(--metal-dark);text-underline-offset:4px}
.company-lesson-chip a:hover{text-decoration-color:var(--blue)}
.company-lesson-note{padding:var(--s3) var(--s4);border:1px dashed var(--metal-dark);border-radius:var(--r1);color:var(--muted)}
.company-result-count{min-height:64px;padding:var(--s5) 0;font-size:14px;color:var(--muted)}

/* 비교 */
.company-comparison{margin:var(--s2) 0 var(--s8);padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
.company-compare-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s5)}
.company-compare-heading strong{font-size:16px}
.company-compare-heading p{margin-top:var(--s2);font-size:12px;color:var(--muted)}
.company-compare-heading>div:last-child{display:flex;flex-wrap:wrap;gap:var(--s2)}
.company-comparison-scroll{max-width:100%;margin-top:var(--s6);overflow:auto}
.company-comparison-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.company-comparison table{width:100%;min-width:680px;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:14px}
.company-comparison caption{padding:var(--s3) 0;text-align:left;font-size:14px;font-weight:650}
.company-comparison th,.company-comparison td{padding:var(--s4);border:1px solid var(--line);vertical-align:top;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
.company-comparison thead,.company-comparison tbody th{background:var(--wash)}
.company-comparison th:first-child{width:140px;font-size:13px}
.company-comparison a{display:inline-block;padding:var(--s1) 0;color:var(--blue)}

/* 기업 카드 */
.company-category{margin:var(--s10) 0}
.company-category .section-bar{margin:0 0 var(--s6);padding-top:var(--s6)}
.company-category .section-bar h2{margin-bottom:var(--s2);font-size:28px}
.company-category .section-bar p{font-size:14px;color:var(--muted)}
.robot-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.robot-company-card{display:flex;flex-direction:column;padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
.company-card-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3);font-size:12px;color:var(--muted)}
.company-card-top label{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer;color:var(--ink)}
.company-card-top input{width:18px;height:18px;accent-color:var(--blue)}
.robot-company-card h3{font-size:24px;line-height:1.4}
.robot-company-card h3 a{display:flex;align-items:start;justify-content:space-between;gap:var(--s3)}
.robot-company-card h3 span{font-size:18px;color:var(--blue)}
.company-english{margin-top:var(--s2);font-size:12px;line-height:1.6;color:var(--muted)}
.company-listing{margin-top:var(--s1);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.company-role{margin:var(--s5) 0;font-size:16px;line-height:1.8}
.company-products{margin-bottom:var(--s6);font-size:13px;line-height:1.8;color:var(--muted)}
.company-products>span{display:block;margin-bottom:var(--s1);font-size:12px;font-weight:650;color:var(--ink)}
.company-makes-line{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
.company-makes-label{flex:1 1 100%;font-size:12px;font-weight:650}
.company-method{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--paper);font-size:13px;font-weight:600;line-height:1.4}
a.company-method{color:var(--blue)}
a.company-method:hover{border-color:var(--blue)}
.company-linked-lessons{display:grid;gap:var(--s2);margin-top:auto}
.company-lesson-link{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:var(--s2) var(--s3);background:var(--wash);border-radius:var(--r1);font-size:12px;line-height:1.6}
.company-lesson-number{flex-shrink:0;font-weight:650;color:var(--blue)}
a.company-lesson-link:hover{background:var(--blue-soft)}
.company-lesson-link.is-planned{background:transparent;border:1px dashed var(--metal-dark);color:var(--muted)}
.company-lesson-link.is-planned .company-lesson-number{color:var(--muted)}
.company-lesson-link .lp-planned{margin-left:auto}

/* 자료 읽는 법 */
.industry-evidence-guide{margin:var(--s16) 0 0;padding-top:var(--s10);border-top:1px solid var(--line)}
.industry-evidence-guide h2{margin-bottom:var(--s6);font-size:28px}
.industry-evidence-guide>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0}
.industry-evidence-guide article{padding:var(--s5);background:var(--wash);border-radius:var(--r2)}
.industry-evidence-guide article>span{font-size:12px;font-weight:650;color:var(--blue)}
.industry-evidence-guide h3{margin:var(--s3) 0;font-size:18px}
.industry-evidence-guide article p{font-size:14px;color:var(--muted)}
.industry-evidence-guide>.button{margin-top:var(--s6)}
.company-guide-planned{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s6);font-weight:600}

/* 기업 상세 */
.company-breadcrumb{align-items:center}
.company-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.company-profile-heading .company-english{margin-top:var(--s4);font-size:17px}
.company-profile-heading .company-profile-role{max-width:840px;margin-top:var(--s6);font-size:22px;line-height:1.7}
.company-profile-notes{display:grid;gap:var(--s3);max-width:640px;margin-top:var(--s6)}
.company-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);margin:0}
.company-facts>div{display:grid;gap:2px}
.company-facts dt{font-size:12px;font-weight:700;color:var(--muted)}
.company-facts dd{margin:0;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.company-checked{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
.company-profile-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(240px,1fr);gap:var(--s16);align-items:start}
.company-profile-content>section{margin-bottom:var(--s12)}
.company-profile-content h2{margin:0 0 var(--s6);font-size:26px;line-height:1.5}
.company-profile-content p{margin:var(--s4) 0;font-size:17px;line-height:1.95}
.company-product-list{margin:0}
.company-product-list>div{padding:var(--s6) 0;border-block-start:1px solid var(--line)}
.company-product-list dt{margin-bottom:var(--s2);font-size:18px;font-weight:650}
.company-product-list dd{margin:0;font-size:16px;line-height:1.9;color:var(--muted)}
.company-makes{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.company-makes li{padding-top:var(--s4);border-top:1px solid var(--line)}
.company-makes li p{max-width:640px;margin:var(--s2) 0 0;font-size:14px;line-height:1.75;color:var(--muted)}
.company-profile-content .company-empty{font-size:15px;color:var(--muted)}
.company-profile-content .company-supply-lead{max-width:640px;font-size:15px;color:var(--muted)}
.company-supply .supply-none{font-size:15px}
.company-supply .evidence-legend{margin:var(--s4) 0 var(--s2)}
.company-tier{margin-top:var(--s6)}
.company-tier h3{display:flex;align-items:center;gap:var(--s2);font-size:16px}
.company-tier-count{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.company-links{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.company-links li{display:grid;gap:var(--s1);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);font-size:15px;line-height:1.75}
.company-link-methods{font-size:12px;font-weight:700;color:var(--muted)}
.company-link-text .source-link{font-size:13px}
.company-evidence-note{padding:var(--s6);background:var(--wash);border-radius:var(--r2)}
.company-profile-content .company-evidence-note p{margin-bottom:0}
.company-watchpoints{padding-left:var(--s6);font-size:17px;line-height:1.95}
.company-watchpoints li{margin:var(--s4) 0;padding-left:var(--s2)}
.company-source-section>p{font-size:15px;color:var(--muted)}
.company-source-section article{padding:var(--s6) 0;border-top:1px solid var(--line)}
.company-source-section h3{font-size:18px;line-height:1.7;color:var(--blue)}
.company-profile-content .company-source-section article p{margin:var(--s3) 0;font-size:15px}
.company-profile-content .company-source-section article .small{font-size:12px;color:var(--muted)}
.company-profile-aside{position:sticky;top:112px}
.company-profile-aside h2{margin-bottom:var(--s5);font-size:24px}
.company-profile-aside .company-lesson-link{font-size:14px}
.company-profile-aside>.button{width:100%;margin:var(--s6) 0 var(--s4)}
.company-profile-aside>.text-link{display:flex;margin-bottom:var(--s2)}
.company-profile-aside>.small{margin-top:var(--s4)}

@media(max-width:1100px){
  .industry-role-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .robot-company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .company-filter-panel{grid-template-columns:1fr 1fr}
  .company-filter-panel>label:first-child{grid-column:1/-1}
  .company-profile-layout{gap:var(--s8)}
  .industry-evidence-guide>div{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .company-profile-layout{grid-template-columns:1fr}
  .company-profile-aside{position:static}
  .company-compare-heading{display:grid;gap:var(--s4)}
}
@media(max-width:600px){
  .industry-primer>h2,.industry-evidence-guide>h2{font-size:24px}
  .industry-primer>p{font-size:16px}
  .industry-role-map{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .industry-role-map button{padding:var(--s4);gap:var(--s2)}
  .industry-role-map strong{font-size:16px}
  .industry-role-map small{font-size:13px}
  .company-filter-panel{grid-template-columns:1fr;padding:var(--s5)}
  .company-filter-panel>label:first-child{grid-column:auto}
  .robot-company-grid{grid-template-columns:1fr}
  .company-category .section-bar{display:block}
  .company-category .section-bar h2{font-size:24px}
  .company-category .section-bar>.small{display:block;margin-top:var(--s3)}
  .company-comparison{padding:var(--s5)}
  .company-comparison table{min-width:640px}
  .company-comparison th,.company-comparison td{padding:var(--s3)}
  .company-comparison th:first-child{width:120px}
  .industry-evidence-guide>div{grid-template-columns:1fr}
  .industry-evidence-guide article{display:grid;grid-template-columns:24px 1fr;gap:var(--s2) var(--s3)}
  .industry-evidence-guide h3{margin:0}
  .industry-evidence-guide article p{grid-column:2}
  .company-profile-heading .company-profile-role{font-size:19px}
  .company-profile-content h2{font-size:24px}
  .company-profile-content p,.company-watchpoints{font-size:16px}
  .company-profile-content>section{margin-bottom:var(--s8)}
  .company-evidence-note{padding:var(--s5)}
  .company-facts{gap:var(--s2) var(--s6)}
}
@media print{
  .company-filter-panel,.company-card-top label,.company-comparison{display:none}
  .company-profile-layout{display:block}
  .company-profile-aside{position:static}
  .lesson-highlight,.industry-primer mark,.company-profile-heading mark,.industry-evidence-guide mark{background:#fff0a8;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}