/* 소개 책자 «산 앱» 쪽 (live.js) — 2026-09-15 */
.bkpage.live .liveapp{display:flex;flex-direction:column;height:100%;min-height:0;gap:10px}
.bkpage.live .la-frame{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(29,58,42,.2);background:#fff;box-shadow:0 10px 28px rgba(29,58,42,.10)}
.bkpage.live .la-frame iframe{position:absolute;left:0;top:0;border:0;display:block;transform-origin:0 0;max-width:none;background:#f6f3ea}
.la-print{display:none}
.la-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;font-size:14px;font-weight:500;color:var(--ink-soft)}
.la-live i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2e8b57;margin-right:7px;vertical-align:middle;animation:laPulse 1.6s ease-in-out infinite}
@keyframes laPulse{0%,100%{opacity:1}50%{opacity:.3}}
.la-big{font:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--brand-deep,#1d3a2a);border:1px solid var(--brand-deep,#1d3a2a);border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.la-big:hover{background:var(--brand,#2a5a3f)}
.la-overlay{position:fixed;inset:0;z-index:9999;background:#f6f3ea;display:flex;flex-direction:column}
.la-ov-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;background:#1d3a2a;color:#fff;font-size:14.5px;font-weight:500}
.la-close{font:inherit;font-weight:700;color:#1d3a2a;background:#fff;border:0;border-radius:8px;padding:7px 14px;cursor:pointer}
.la-overlay iframe{flex:1 1 auto;width:100%;border:0;background:#f6f3ea}
body.la-open{overflow:hidden}
/* 넘김 중에는 앱을 그리지 않는다 — 큰 iframe에 3D 변형이 걸리면 프레임이 떨어진다(2026-09-15 «버벅거림») */
body.is-flipping .la-frame iframe{visibility:hidden}
body.is-flipping .la-frame{background:#f6f3ea}
.la-note{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9998;background:#1d3a2a;color:#fff;font-size:15px;font-weight:600;padding:12px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media print{
  .la-bar{display:none}
  .la-frame{box-shadow:none;background:#f6f3ea}
  .la-frame iframe{visibility:visible !important}
}

/* 21쪽 학급 코드 세 단계 — 로그인 뒤 화면이라 캡처로(2026-09-15) */
.join-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-bottom:14px}
.join-steps figure{margin:0;min-width:0}
.join-steps img{width:100%;height:auto;max-height:none;border-radius:12px;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.join-steps figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:#cfd9c9}
.join-steps figcaption b{display:block;font-family:var(--serif);font-size:14.5px;color:#fff;margin-bottom:2px}
.bkpage.steps{padding-right:34px}
.bkpage.steps > figcaption{font-size:13.5px;line-height:1.7;color:#cfd9c9}
.bkpage.steps > figcaption b{display:block;font-family:var(--serif);font-size:15px;color:#fff;margin-bottom:3px}