/* 강좌별 추가 스타일 — lectureBuilder 가 엔진을 갱신해도 이 파일은 덮어쓰지 않습니다. */

/* ------------------------------------------------ 오른쪽 실행 결과 패널 (js/custom.js) */
:root { --run-w: 440px; }
#runPane { display: none; }

@media (min-width: 1100px) {
  #runPane {
    display: flex; flex-direction: column; flex: none; width: var(--run-w);
    position: sticky; top: 0; height: 100vh;
    background: var(--pane); border-left: 1px solid var(--line);
  }
  body.rp-home #runPane { display: none; }
  #runPane .rp-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
  #runPane .rp-resize:hover, body.rp-dragging #runPane .rp-resize { background: color-mix(in srgb, var(--accent) 35%, transparent); }
  body.rp-dragging { user-select: none; cursor: col-resize; }

  #runPane .rp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); min-height: 52px; }
  #runPane .rp-title { font-weight: 800; font-size: 15px; }
  #runPane.busy .rp-title::after { content: ' · 실행 중…'; color: var(--accent); font-weight: 600; font-size: 13px; }
  #runPane .rp-src-label {
    display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line);
    background: var(--card2); color: var(--muted); font-size: 13px; padding: 6px 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #runPane .rp-src-label:hover { color: var(--accent); }
  #runPane .rp-body { flex: 1; max-height: none; overflow: auto; border-radius: 0; padding: 12px 14px; }
  #runPane .rp-body .out-img { margin: 8px auto; }
  #runPane .rp-empty { color: #8d98a8; font-family: var(--sans); text-align: center; padding: 60px 16px; line-height: 1.8; white-space: normal; }
  #runPane .rp-empty-icon { font-size: 40px; opacity: .7; }

  /* 지금 결과 패널에 보이는 코드 */
  #doc .rp-src { box-shadow: 0 0 0 2px var(--accent); }
}

@media print { #runPane { display: none !important; } }

/* ------------------------------------------------ 하단 고정 코드 편집기 (js/custom.js) */
:root { --dock-h: 300px; }
#main { display: flex; flex-direction: column; }
#doc { width: 100%; flex: 1; }
#playDock {
  position: sticky; bottom: 0; z-index: 6; height: var(--dock-h);
  display: flex; flex-direction: column;
  background: var(--pane); border-top: 2px solid var(--accent);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}
#playDock.closed { height: auto; }
#playDock.closed .pd-body, #playDock.closed .pd-resize { display: none; }
body.pd-off #playDock { display: none; }
#playDock .pd-resize { position: absolute; left: 0; right: 0; top: -5px; height: 8px; cursor: row-resize; }
#playDock .pd-resize:hover, body.pd-dragging #playDock .pd-resize { background: color-mix(in srgb, var(--accent) 35%, transparent); }
body.pd-dragging { user-select: none; cursor: row-resize; }
#playDock .pd-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); flex: none; }
#playDock.closed .pd-head { border-bottom: 0; }
#playDock .pd-toggle { border: 0; background: transparent; color: var(--fg); font-weight: 800; font-size: 14.5px; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playDock .pd-arrow { color: var(--accent); }
#playDock .pd-hint { color: var(--muted); font-size: 12px; }
#playDock .pd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 10px; overflow: auto; }
#playDock textarea.code {
  flex: 1; min-height: 120px; width: 100%; resize: none; tab-size: 4; line-height: 1.55;
  border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg); color: var(--fg); padding: 10px 12px;
}
#playDock .out { flex: none; border-radius: 8px; }
@media (max-width: 900px) { #playDock .pd-hint { display: none; } #playDock .pd-head { padding: 6px 10px; flex-wrap: wrap; } }
@media print { #playDock { display: none !important; } }