/* 오픈웨이트 — 강 위젯 스타일. 모든 선택자는 .lesson-oss 아래. 원본 ~/dev/hey/site/oss/index.html 인라인 style 에서 옮김 */
.lesson-oss{
  --ink:var(--bg); --ink2:var(--surface); --ink3:var(--surface-2); --line2:var(--line-2);
  --muted:var(--text-2); --muted-d:var(--text-3); --accent:var(--mint); --accent-soft:var(--mint-soft);
  --warn:#ffc44d;
  --oss-on:var(--mint-ink);
}
:root[data-theme="light"] .lesson-oss{--warn:#7a4f00}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .lesson-oss{--warn:#7a4f00}}

.lesson-oss p.mut{color:var(--muted)}
.lesson-oss .key{margin-top:20px;padding:16px 20px;background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;font-weight:600;color:var(--text)}

.lesson-oss .demo{margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2)}
.lesson-oss .demo-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:11px 16px;border-bottom:1px solid var(--line2);font-size:12.5px;color:var(--muted)}
.lesson-oss .demo-bar b{color:var(--accent);font-weight:700;letter-spacing:.06em;flex-shrink:0}
.lesson-oss .demo-stage{padding:22px}

.lesson-oss .tbl-wrap{overflow-x:auto}
.lesson-oss td b{color:var(--accent)}

.lesson-oss .fig-solo{padding:18px}
.lesson-oss .jrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-d)}
.lesson-oss .j{border:1px solid var(--line2);border-radius:999px;padding:4px 11px;background:var(--ink3);color:var(--muted);font-size:12px;white-space:nowrap}
.lesson-oss .j.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.lesson-oss .fb-note{font-size:12.5px;color:var(--muted-d);margin:0;padding:0 16px 16px;text-align:center}

.lesson-oss .badge{font-weight:800;padding:2px 9px;border-radius:999px;font-size:11.5px;flex-shrink:0}
.lesson-oss .badge.ok{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.lesson-oss .badge.no{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}
.lesson-oss input[type=range]{accent-color:var(--accent);width:100%}

/* 5강 — 오픈소스 판정기 */
.lesson-oss .vf-row{margin-bottom:16px}
.lesson-oss .vf-row + .vf-row{margin-bottom:0}
.lesson-oss .vf-row .lab{font-size:12px;color:var(--muted);margin-bottom:8px}
.lesson-oss .vpills{display:flex;gap:8px;flex-wrap:wrap}
.lesson-oss .vpill{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--ink3);border:1px solid var(--line2);border-radius:999px;
  padding:8px 14px;min-height:40px;cursor:pointer;transition:.15s}
.lesson-oss .vpill:hover{color:var(--text);border-color:var(--text-3)}
.lesson-oss .vpill.on{background:var(--accent);color:var(--oss-on);border-color:transparent;font-weight:700}
.lesson-oss .verdict{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--ink3);
  border:1px solid var(--line2);transition:.15s}
.lesson-oss .verdict .vt{font-size:11px;letter-spacing:.14em;color:var(--muted-d);font-weight:700}
.lesson-oss .verdict .vb{font-size:19px;font-weight:800;margin-top:6px;line-height:1.35}
.lesson-oss .verdict .vd{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.lesson-oss .verdict.g{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--ink3))}
.lesson-oss .verdict.g .vb{color:var(--accent)}
.lesson-oss .verdict.w{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 6%,var(--ink3))}
.lesson-oss .verdict.w .vb{color:var(--warn)}
.lesson-oss .verdict.b{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 6%,var(--ink3))}
.lesson-oss .verdict.b .vb{color:var(--bad)}

/* 11강 — FMTI 슬라이더 */
.lesson-oss .fmti-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px}
.lesson-oss .fmti-row:last-child{border-bottom:0}
.lesson-oss .fmti-row .nm{font-weight:600}
.lesson-oss .fmti-row .sc{color:var(--muted-d);font-variant-numeric:tabular-nums;font-size:12.5px;margin-left:8px}
.lesson-oss .fmti-thresh{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:18px}
.lesson-oss .fmti-thresh b{color:var(--accent);font-variant-numeric:tabular-nums}

/* 표지 부록 — 판정 체크리스트 */
.lesson-oss .ck{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.lesson-oss .ck .g{font-size:11.5px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin:18px 0 6px}
.lesson-oss .ck label{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;border-radius:10px;
  font-size:14.5px;color:var(--text);cursor:pointer}
.lesson-oss .ck label:hover{background:var(--ink3)}
.lesson-oss .ck input{width:17px;height:17px;accent-color:var(--accent);margin-top:3px;flex-shrink:0}
.lesson-oss .ck input:checked+span{color:var(--muted-d)}
.lesson-oss .ck-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.lesson-oss .ck-count{font-size:13px;color:var(--muted)}
.lesson-oss .ck-count b{color:var(--accent);font-size:17px}
.lesson-oss .ck-reset{font-family:inherit;font-size:12px;background:none;border:1px solid var(--line2);
  color:var(--muted-d);border-radius:999px;padding:5px 12px;min-height:32px;cursor:pointer}
.lesson-oss .ck-reset:hover{color:var(--bad);border-color:var(--bad)}

@media (prefers-reduced-motion:reduce){
  .lesson-oss .vpill,.lesson-oss .verdict{transition:none}
}