/* ============================================================
   고등학교 정보과 웹교과서 — 데이터 과학 심화판 파이썬 부품 모양 (pydata.css)
   pydata.js 와 짝. **데이터 과학 심화판 차시만 싣는다**(textbook.css · advanced.css 다음).
   기초판·인공지능 기초 심화판은 이 파일을 싣지 않는다 — 실어도 여기 규칙은
   pydata.js 가 만든 요소(.py-note · .py-fig · .py-fb · .py-toast · .py-has-fig)와
   실행 칸 속성(data-out="table")에만 걸린다.
   ============================================================ */

/* ---------- 1. 칸 머리 안내 — 무거운 꾸러미(scikit-learn·matplotlib·statsmodels) ---------- */
.pyrun .py-note {
  padding: 8px 18px; font-size: .8rem; line-height: 1.6; color: #a7b4d4;
  background: rgba(255, 255, 255, .03); border-bottom: 1px solid #233358;
}
.pyrun .py-note.ok { color: #86efac; }
.pyrun .py-note.warn { color: #fcd34d; }

/* ---------- 2. 표 출력 — 가로로 밀어 본다(글자 단위로 꺾이지 않게) ---------- */
.pyrun[data-out="table"] .py-out {
  white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: auto;
}

/* ---------- 3. 그림이 든 출력 — 높이 제한(280px)을 푼다 ---------- */
.pyrun .py-out.py-has-fig { max-height: none; }

/* ---------- 4. 그림 한 장 — 어두운 출력 칸 안의 흰 카드 ---------- */
.pyrun .py-out .py-fig {
  position: relative; display: block; margin: 10px 0 12px; padding: 12px 12px 10px;
  background: #fff; color: #1e293b; border-radius: 12px;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  white-space: normal; word-break: keep-all; overflow-wrap: break-word;
}
.pyrun .py-out .py-fig:first-child { margin-top: 2px; }
.py-fig .py-fig-title { margin: 0 2px 6px; font-size: 14.5px; font-weight: 800; color: #0f172a; }
.py-fig .py-fig-legend { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 0 2px 6px; font-size: 12.5px; color: #334155; }
.py-fig .py-fig-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.py-fig .py-fig-legend svg { display: block; flex: none; }
.py-fig .py-fig-yl { margin: 0 2px 2px; font-size: 12px; color: #64748b; }
.py-fig .py-fig-xl { margin-top: 2px; font-size: 12px; color: #64748b; text-align: center; }
.py-fig svg.py-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; touch-action: pan-y; }
.py-fig.py-mpl img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.py-fig .py-fig-err { font-size: 13px; color: #b91c1c; }
/* 실측기(pyodide_run.mjs)만 켜는 대역 글자 줄 */
.pyrun .py-out .py-echo { color: #94a3b8; }
.py-fig .py-tip {
  position: absolute; z-index: 2; pointer-events: none; padding: 6px 9px; border-radius: 8px;
  background: #0f172a; color: #f8fafc; font-size: 12.5px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
}
.py-fig .py-tip .h { font-weight: 800; margin-bottom: 1px; }
.py-fig .py-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.py-fig .py-tip b { font-weight: 700; }
.py-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 5. 막힌 학교망 대체판 — <template class="py-fallback"> 을 펼친 것 ---------- */
.pyrun .py-out .py-fb-note { color: #fcd34d; }
.pyrun .py-out .py-fb { white-space: normal; margin-top: 6px; }
.pyrun .py-out .py-fb pre {
  margin: 0 0 8px; padding: 0; background: none; border: 0; color: inherit;
  font: inherit; white-space: pre-wrap; word-break: break-all;
}
.pyrun[data-out="table"] .py-out .py-fb pre { white-space: pre; word-break: normal; }
.pyrun .py-out .py-fb img {
  display: block; max-width: 100%; height: auto; margin: 8px 0 10px;
  background: #fff; border-radius: 12px; padding: 10px;
}

/* ---------- 6. 예열 중 알림 — 화면이 멈추기 직전에 먼저 그린다 ---------- */
/* 한가운데 아래에 두면 좁은 화면에서 본문·조작을 가린다(2026-09-23 실측) — 오른쪽 아래 구석으로. */
.py-toast {
  position: fixed; right: 16px; left: auto; bottom: 16px; z-index: 60; transform: translateY(16px);
  max-width: min(380px, calc(100vw - 32px)); padding: 9px 16px; border-radius: 99px;
  background: #0f172a; color: #e2e8f0; font-size: 13px; font-weight: 700; line-height: 1.45;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .3); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
/* 켤 때는 전환 없이 — 바로 다음 장면에서 멈추므로 첫 장면에 이미 보여야 한다 */
.py-toast.on { opacity: 1; transform: translateY(0); transition: none; }

/* 아주 좁은 화면에서는 구석에 넣을 자리가 없다 — 아래 띠로 눕히되 높이를 줄인다. */
@media (max-width: 560px) {
  .py-toast { left: 12px; right: 12px; max-width: none; text-align: center; padding: 7px 12px; font-size: 12px; border-radius: 12px; }
}

@media (max-width: 760px) {
  .pyrun .py-note { padding: 7px 14px; }
  .pyrun .py-out .py-fig { padding: 10px 8px 8px; border-radius: 10px; }
}
@media print {
  .py-toast { display: none !important; }
  .pyrun .py-out.py-has-fig { max-height: none; }
}