/* 강좌별 추가 스타일 — lectureBuilder 가 엔진을 갱신해도 이 파일은 덮어쓰지 않습니다.
 * index.html · plc.html(PLC 에디터) · hmi.html(HMI 편집기) 에서 css/theme.css 다음에 불러옵니다.
 * 색 변수(css/style.css): --accent --accent-soft --accent2 --accent2-soft --ok --warn --danger --bg --pane --card --line --fg --muted
 * 다크 모드 선택자: :root[data-theme="dark"]
 */

/* ---------------------------------------------------------------- PLC 화면 숨기기 (시퀀스 도면 강좌) */
#app.layout, #app.layout.nav-collapsed { grid-template-columns: var(--nav-w) 5px minmax(360px, 1fr) 0 0 !important; }
#app.layout.nav-collapsed { grid-template-columns: 0 0 minmax(360px, 1fr) 0 0 !important; }
#app > #output, #app > .gutter[data-resize="out"], .nav-editor, [data-fs="console"], #fsConsoleSlot,
.practice .actions, .practice-body > details:has(pre.plain-code) { display: none !important; }
@media (max-width: 900px) { #app.layout, #app.layout.nav-collapsed { grid-template-columns: 1fr !important; } }

/* ---------------------------------------------------------------- 시퀀스 도면 시뮬레이터 */
.seq-sim {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 10px 10px;
  margin: 6px 0; text-align: left; color: var(--fg); width: 100%; box-sizing: border-box;
}
.seq-sim .seq-src, .seq-sim .seq-test { display: none; }
.seq-sim:not([data-seq-mounted]) .seq-src { display: block; font: 12px var(--mono, monospace); white-space: pre; }
.sq-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sq-title { font-size: 14px; }
.sq-sp { flex: 1; }
.sq-btn { border: 1px solid var(--line); background: var(--card2, var(--pane)); color: var(--fg); border-radius: 7px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.sq-btn:hover { border-color: var(--accent); }
.sq-pw.on { color: var(--ok); border-color: var(--ok); }
.sq-pw:not(.on) { color: var(--danger); border-color: var(--danger); }
.sq-draw { overflow-x: auto; display: flex; justify-content: center; }
.sq-svg { width: 100%; height: auto; display: block; font-family: var(--sans, sans-serif); user-select: none; -webkit-user-select: none; touch-action: none; }
.sq-P { stroke: var(--danger); stroke-width: 3.5; }
.sq-N { stroke: #2563eb; stroke-width: 3.5; }
:root[data-theme="dark"] .sq-N { stroke: #60a5fa; }
.sq-pl { fill: var(--danger); font-weight: 800; font-size: 13px; }
.sq-nl { fill: #2563eb; font-weight: 800; font-size: 13px; }
.sq-no { fill: var(--muted); font-size: 11px; text-anchor: middle; font-weight: 700; }
.sq-w { stroke: var(--muted); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.sq-w.live { stroke: var(--ok); stroke-width: 3.6; }
.sq-dot { fill: var(--fg); }
.sq-blade { stroke: var(--fg); stroke-width: 2.8; stroke-linecap: round; fill: none; }
.sq-stub { stroke: var(--fg); stroke-width: 2.4; }
.sq-c.closed .sq-blade { stroke: var(--ok); }
.sq-c.live .sq-dot { fill: var(--ok); }
.sq-act { stroke: var(--muted); stroke-width: 1.6; fill: none; stroke-dasharray: 3 2; }
.sq-c.act .sq-act { stroke: var(--warn); stroke-dasharray: none; }
.sq-click { cursor: pointer; }
.sq-click:hover rect { fill: var(--accent-soft); fill-opacity: .55; }
.sq-n { fill: var(--fg); font-size: 12px; font-weight: 700; }
.sq-l { fill: var(--muted); font-size: 10.5px; }
.sq-v { fill: var(--warn); font-size: 10.5px; font-weight: 700; }
.sq-coil { fill: var(--card); stroke: var(--accent); stroke-width: 2.4; }
.sq-ct { fill: var(--accent); font-size: 10.5px; font-weight: 800; text-anchor: middle; }
.sq-cl { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.sq-k.on .sq-coil { fill: var(--accent); }
.sq-k.on .sq-ct { fill: #fff; }
.sq-k.on .sq-cl { stroke: #fff; }
.sq-bulb { fill: var(--card); stroke: var(--lc); stroke-width: 2.6; }
.sq-k.sq-lamp.on .sq-bulb { fill: var(--lc); filter: drop-shadow(0 0 7px var(--lc)); }
.sq-k.sq-lamp.on .sq-cl { stroke: rgba(0, 0, 0, .45); }
.sq-k.sq-ton.done .sq-coil, .sq-k.sq-tof.done .sq-coil, .sq-k.sq-cnt.done .sq-coil { stroke: var(--warn); stroke-width: 3.4; }
.sq-k.sq-bz.on .sq-coil { fill: var(--warn); animation: sqbuzz .15s infinite alternate; }
@keyframes sqbuzz { from { transform: translateX(-.6px); } to { transform: translateX(.6px); } }
.sq-caps { margin: 4px 0 2px; padding-left: 22px; font-size: 12.5px; color: var(--muted); columns: 2 220px; }
.sq-panel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sq-in {
  display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--line); background: var(--pane); color: var(--fg);
  border-radius: 9px; padding: 5px 10px; font-size: 13px; cursor: pointer; user-select: none; touch-action: none;
}
.sq-in small { color: var(--muted); font-size: 10.5px; margin-left: 2px; }
.sq-in .sq-ind { width: 12px; height: 12px; border-radius: 50%; background: var(--lc, var(--muted)); opacity: .35; border: 1px solid rgba(0,0,0,.2); }
.sq-in.on { border-color: var(--ok); background: var(--accent-soft); }
.sq-in.on .sq-ind { opacity: 1; box-shadow: 0 0 6px var(--lc, var(--ok)); }
.sq-in-pb.on { transform: translateY(1px); }
.sq-in-thr.on, .sq-in-emg.on { border-color: var(--danger); }
.sq-in.auto { cursor: default; opacity: .85; }
.sq-plant { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line); border-radius: 9px; padding: 4px 10px; font-size: 13px; }
.sq-plant small { color: var(--muted); font-size: 11px; }
.sq-motor { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.sq-motor:not(.stop) { border-color: var(--ok); border-top-color: transparent; color: var(--ok); animation: sqspin .8s linear infinite; }
.sq-motor.rev { animation-direction: reverse; }
.sq-motor.star { animation-duration: 1.6s; }
.sq-motor.short { border-color: var(--danger); color: var(--danger); animation: none; }
@keyframes sqspin { to { transform: rotate(360deg); } }
.sq-cyl { position: relative; width: 66px; height: 16px; border: 2px solid var(--muted); border-radius: 3px; }
.sq-cyl i { position: absolute; top: 2px; width: 12px; height: 8px; background: var(--accent); border-radius: 2px; }
.sq-cyl i::after { content: ''; position: absolute; left: 12px; top: 3px; width: 50px; height: 2px; background: var(--fg); }
.sq-tank { position: relative; width: 20px; height: 28px; border: 2px solid var(--muted); border-top: none; border-radius: 0 0 4px 4px; overflow: hidden; }
.sq-tank i { position: absolute; left: 0; right: 0; bottom: 0; background: #3b82f6; opacity: .75; }
.sq-warn { margin-top: 6px; color: var(--danger); font-weight: 700; font-size: 13px; }
.sq-warn.hidden { display: none; }
.sq-err { color: var(--danger); font: 12px var(--mono, monospace); white-space: pre-wrap; }

/* 슬라이드 안에서 */
.s-diagram .seq-sim { height: 100%; display: flex; flex-direction: column; padding: .5cqw .8cqw; font-size: 1.1cqw; }
.s-diagram .seq-sim .sq-draw { flex: 1; min-height: 0; }
.s-diagram .seq-sim .sq-svg { width: 100%; height: 100%; max-width: none !important; }
.s-diagram .seq-sim .sq-title { font-size: 1.3cqw; }
.s-diagram .seq-sim .sq-in, .s-diagram .seq-sim .sq-plant, .s-diagram .seq-sim .sq-btn { font-size: 1.15cqw; }
.s-diagram .seq-sim .sq-caps { font-size: 1.05cqw; }
.s-practice .seq-sim { font-size: 1.1cqw; }
.s-practice .seq-sim .sq-svg { max-height: 22cqw; }

/* ---------------------------------------------------------------- 객관식 과제 */
.seq-quiz { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--pane); }
.seq-quiz > p:first-child { font-weight: 700; margin-top: 2px; }
.seq-quiz ol { padding-left: 0; list-style: none; counter-reset: sqo; display: grid; gap: 5px; }
.seq-quiz li.sq-opt { counter-increment: sqo; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; background: var(--card); }
.seq-quiz li.sq-opt::before { content: counter(sqo) '. '; font-weight: 800; color: var(--accent); }
.seq-quiz li.sq-opt:hover { border-color: var(--accent); }
.seq-quiz li.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.seq-quiz li.right::after { content: '  ✔ 정답'; color: var(--ok); font-weight: 700; }
.seq-quiz li.wrong { border-color: var(--danger); }
.seq-quiz li.wrong::after { content: '  ✘ 다시 생각해 보세요'; color: var(--danger); font-weight: 700; }
.seq-quiz li.key:not(.right)::after { content: '  🔑'; }
.seq-quiz .seq-exp { display: none; margin-top: 6px; color: var(--muted); }
.seq-quiz .seq-exp.show { display: block; }
.seq-quiz .seq-exp::before { content: '💡 해설 — '; font-weight: 700; color: var(--fg); }
.seq-desc { text-align: left; margin-top: 8px; }
.figure .seq-sim + .seq-desc > :first-child { margin-top: 0; }
.figure > .seq-sim { border: none; padding: 0; margin: 0; background: transparent; }
.figure .sq-svg { margin: 0 auto; }