/* 머신비전 강좌 추가 스타일: 언어 탭 · 이미지 창 · 확대 보기 · 카메라 패널 · 패키지 · 작업 폴더 */
:root {
  --accent: #0e7490;          /* 비전 청록 */
  --accent-soft: #e0f4f8;
  --cpp: #2563eb;
  --cpp-soft: #e6eefe;
  --py: #a16207;
  --py-soft: #fef6dc;
}
:root[data-theme="dark"] {
  --accent: #38bdf8;
  --accent-soft: #10283a;
  --cpp: #7aa7ff;
  --cpp-soft: #172340;
  --py: #f2c14e;
  --py-soft: #33290f;
}

/* ---------------------------------------------------------------- 네비 도구 */
.nav-tools { display: flex; gap: 6px; margin: 0 0 8px; }
.nav-tool { flex: 1; text-align: center; font: 600 13px var(--sans); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; text-decoration: none; }
.nav-tool:hover { border-color: var(--accent); color: var(--accent); }
.nav-foot { display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------------- 언어 선택 */
.lang-switch, .lang-tabs, .s-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); vertical-align: middle; }
.lang-switch button, .lang-tabs .lt, .s-lang .lt { border: 0; background: transparent; color: var(--muted); font: 600 12.5px var(--sans); padding: 3px 10px; cursor: pointer; }
.lang-switch button + button, .lang-tabs .lt + .lt, .s-lang .lt + .lt { border-left: 1px solid var(--line); }
.lang-switch button.active { background: var(--accent); color: #fff; }
.lang-switch button.missing { opacity: .55; }
.lang-switch button.missing::after { content: ' ＋'; font-size: 11px; }
body.lang-py .lang-tabs .lt[data-set-lang="py"], body.lang-cpp .lang-tabs .lt[data-set-lang="cpp"] { background: var(--accent); color: #fff; }
.files-tabs .lt.active { background: var(--accent); color: #fff; }
.lang-chip { font-size: 11.5px; padding: 1px 8px; }
.local-chip { font-size: 11.5px; padding: 1px 8px; color: var(--warn); border-color: var(--warn); }
.doc-lang { margin-left: 2px; }

/* 두 언어 코드 블록: 선택한 언어만 보이기 */
body.lang-py .code-block.dual > .code-pane[data-lang="cpp"],
body.lang-cpp .code-block.dual > .code-pane[data-lang="py"],
body.lang-py .practice.dual .code-pane[data-lang="cpp"],
body.lang-cpp .practice.dual .code-pane[data-lang="py"],
body.lang-py .code-block.dual .solution .code-pane[data-lang="cpp"] { display: none; }
.code-pane[data-lang="cpp"] pre { border-left: 3px solid var(--cpp); }
.code-pane[data-lang="py"] pre { border-left: 3px solid var(--py); }
.norun-note { font-size: 12.5px; color: var(--muted); padding: 6px 14px; border-top: 1px dashed var(--line); background: var(--card2); }
.code-block .expect { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- 콜아웃 (현장 노트 · 빌더) */
.callout.field { border-left-color: #0e7490; background: color-mix(in srgb, #0e7490 7%, var(--card)); }
.callout.field .ct { color: #0e7490; }
:root[data-theme="dark"] .callout.field .ct { color: #38bdf8; }
.callout.builder { border-left-color: #9333ea; background: color-mix(in srgb, #9333ea 7%, var(--card)); }
.callout.builder .ct { color: #9333ea; }
:root[data-theme="dark"] .callout.builder .ct { color: #c084fc; }
.callout.builder .meta-row { margin: 10px 0 0; }
.figure img.asset-img { display: block; margin: 0 auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; image-rendering: auto; }

/* ---------------------------------------------------------------- 이미지 창 (결과 창) */
.imwin { display: block; margin: 6px 0 10px; border: 1px solid #2d3643; border-radius: 8px; overflow: hidden; background: #1a1f27; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.imwin-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font: 600 12px var(--sans); color: #cfd6e2; background: #242b36; border-bottom: 1px solid #2d3643; white-space: nowrap; }
.imwin-name { color: #fff; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.imwin-dim { color: #8d97a8; font: 11px var(--mono); }
.imwin-px { color: #7ee787; font: 11px var(--mono); overflow: hidden; text-overflow: ellipsis; }
.imwin-btn { border: 1px solid #3a4452; background: #1a1f27; color: #cfd6e2; border-radius: 5px; padding: 0 6px; cursor: pointer; font-size: 12px; }
.imwin-btn:hover { border-color: var(--accent); color: #fff; }
.imwin-body { display: flex; justify-content: center; background: repeating-conic-gradient(#20252d 0% 25%, #1a1f27 0% 50%) 50% / 16px 16px; }
.imwin-body canvas { display: block; max-width: 100%; max-height: var(--imwin-max-h, 60vh); width: auto; height: auto; image-rendering: pixelated; cursor: crosshair; }

/* ---------------------------------------------------------------- 확대 보기 */
.iv-back { position: fixed; inset: 0; z-index: 3000; background: rgba(5, 8, 12, .72); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.iv-card { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--pane); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.iv-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.iv-px { font: 12.5px var(--mono); color: var(--accent); margin-right: 8px; }
.iv-stage { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.iv-stage:active { cursor: grabbing; }
.iv-stage canvas { position: absolute; inset: 0; }
.iv-foot { padding: 4px 12px; font-size: 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- 카메라 패널 */
.campanel { position: fixed; right: 18px; top: 70px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 90px); z-index: 2500; display: flex; flex-direction: column;
  background: var(--pane); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.28); overflow: hidden; }
.campanel.hidden { display: none; }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; background: var(--card2); }
.cp-status { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.cp-tabs { display: flex; border-bottom: 1px solid var(--line); }
.cp-tabs button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 7px 4px; font: 600 12.5px var(--sans); cursor: pointer; border-bottom: 2px solid transparent; }
.cp-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.cp-body { padding: 8px 12px; font-size: 13px; overflow: auto; max-height: 34vh; }
.cp-body p { margin: 4px 0; }
.cp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.cp-row label { font-size: 12.5px; color: var(--muted); }
.cp-row input, .cp-row select, .cp-params input, .cp-params select { font: 13px var(--sans); padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.cp-row input[data-k="bridgeUrl"] { flex: 1; min-width: 180px; font-family: var(--mono); }
.cp-drivers { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.cp-drivers .chip { font-size: 11.5px; padding: 1px 8px; }
.cp-drivers .chip.ok { color: var(--ok); border-color: var(--ok); }
.cp-params { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; margin: 6px 0; }
.cp-help summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.cp-view { background: #111; position: relative; min-height: 120px; display: flex; flex-direction: column; align-items: center; }
.cp-view canvas { max-width: 100%; max-height: 36vh; display: block; }
.cp-info { font-size: 11.5px; padding: 2px 8px; color: #aaa !important; align-self: stretch; }
.cp-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); }
.cp-foot { font-size: 12px; padding: 0 12px 8px; }
.campanel .err, .modal .err { color: var(--danger); }

/* ---------------------------------------------------------------- 작업 폴더 · 패키지 */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0; }
.asset-tile { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--card); display: flex; flex-direction: column; }
.asset-tile:hover { border-color: var(--accent); }
.asset-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #222; display: block; }
.asset-tile span { font: 11px var(--mono); padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 슬라이드 언어 탭 · 사진 */
.s-lang { margin-left: 8px; font-size: 1cqw; }
.s-lang .lt { font-size: 1.05cqw; padding: .2cqw .8cqw; }
.s-lang .lt.active { background: var(--accent); color: #fff; }
.s-lang-chip { margin-left: 8px; font: 600 1cqw var(--sans); color: var(--muted); }
.s-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .6cqw; cursor: zoom-in; }