/* Leapinity 시뮬레이션 화면 모양
   - 색·글꼴·버튼·위아래 막대는 lp-brand.css(Leapinity 공통)를 써요. 여기는 이 사이트에만 필요한 모양.
   - 고유 색: 보라 #6d4aff (흰 글자 5.6:1) / 흰 바탕 글자 #5b3ff0 / 어두운 바탕 글자 #b4a3ff
   - style-src 'self' 라서 HTML 에 style="…" 을 쓰지 않아요 (자바스크립트 el.style 은 괜찮아요) */
:root {
  --lp-accent: #6d4aff; --lp-accent-ink: #5b3ff0; --lp-accent-ink-dark: #b4a3ff; --lp-on-accent: #fff;
  --c-soft: #efeaff; --c-muted: #565d7e; --c-line: #e1e4f0;
  --space: #03040f; --space-ink: #eef0fb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-soft: #241d52; --c-muted: #b7bcd8; --c-line: #2a3263; color-scheme: dark; } }
:root[data-theme="dark"] { --c-soft: #241d52; --c-muted: #b7bcd8; --c-line: #2a3263; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
main { flex: 1; padding-bottom: 8px; }
a { color: var(--lp-accent-ink); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.3; word-break: keep-all; }
p, li, dd { word-break: keep-all; overflow-wrap: anywhere; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lp-card, #fff); color: var(--lp-ink); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
.copy-helper { position: fixed; left: -9999px; top: 0; opacity: 0; }
.muted { color: var(--c-muted); }
.bar-link { min-height: 44px; }
.lp-wrap { padding-left: 16px; padding-right: 16px; }

/* 첫 화면 · 카테고리 */
.hero { padding-top: 40px; padding-bottom: 8px; }
.hero h1 { font-size: clamp(30px, 6vw, 52px); margin: 8px 0 12px; }
.lead { font-size: 18px; color: var(--c-muted); max-width: 720px; }
.content { margin-top: 32px; }
.content h2 { font-size: 24px; margin: 0 0 14px; }
.page-head { padding-top: 24px; }
.page-head h1 { font-size: clamp(28px, 5vw, 40px); margin: 6px 0 8px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 14px; font-size: 14px; color: var(--c-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cat-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; text-decoration: none; color: var(--lp-ink); min-height: 170px; transition: transform .2s var(--lp-ease); }
.cat-card:hover { transform: translateY(-3px); }
.cc-e { font-size: 40px; line-height: 1; }
.cat-card b { font-size: 22px; }
.cat-card span { color: var(--c-muted); }
.cat-card .cc-n, .cat-card .cc-ext { margin-top: auto; font-weight: 700; color: var(--lp-accent-ink); font-size: 14px; }
.sims { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sim-card { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; color: var(--lp-ink); min-height: 96px; }
.sc-e { font-size: 36px; }
.sc-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-t b { font-size: 18px; }
.sc-t span { color: var(--c-muted); font-size: 14px; }
.sc-go { font-weight: 800; color: var(--lp-accent-ink); white-space: nowrap; }
.sc-soon { font-size: 13px; font-weight: 800; background: var(--c-soft); color: var(--lp-accent-ink); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.sim-card.soon { opacity: .9; }
.perks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.perks li { background: var(--c-soft); border-radius: 16px; padding: 14px 16px; }
.perks b { display: block; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row.center { justify-content: center; }
.big-btn { min-height: 52px; padding: 0 22px; }
.nf { text-align: center; padding-top: 60px; }
.nf-emoji { font-size: 64px; margin: 0; }
.legal h2 { font-size: 19px; margin-top: 24px; }
.legal li { margin: 6px 0; }
.legal a { display: inline-block; min-height: 24px; }
.credit-list { font-size: 14px; }
.faq { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.more-link a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.foot-cats a, .lp-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* 시뮬레이션 화면 */
.sim-head { padding-top: 8px; }
.sim-head h1 { font-size: clamp(26px, 5vw, 38px); margin: 4px 0 4px; }
.sim-lead { color: var(--c-muted); margin: 0 0 12px; }
.scene-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.scene-tab { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--c-line); background: var(--lp-ghost-bg); color: var(--lp-ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.scene-tab[aria-selected="true"] { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }
.stage { position: relative; height: min(72vh, 680px); min-height: 380px; border-radius: 20px; overflow: hidden; background: var(--space); color: var(--space-ink); touch-action: none; user-select: none; -webkit-user-select: none; }
.gl, .sky2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl[hidden], .sky2d[hidden] { display: none; }
.gl:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: -3px; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lab { position: absolute; left: 0; top: 0; padding-left: 9px; margin-top: -10px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; opacity: 0; transition: opacity .2s; will-change: transform; }
.lab.on { opacity: 1; }
.lab.con { color: #c9c2ff; font-weight: 600; font-size: 12px; padding-left: 0; margin-left: -20px; }
.lab.star { color: #ffe9b8; font-size: 12px; }
.lab.you { color: #2dd4a7; font-size: 14px; }
.labels.no-con .lab.con { display: none; }
.hud { position: absolute; left: 12px; top: 10px; right: 64px; pointer-events: none; text-shadow: 0 1px 3px #000; }
.hud p { margin: 0; }
.hud-t { font-weight: 800; font-size: 17px; }
.hud-s { font-size: 13px; color: #d6daf0; }
.scalebar { position: absolute; left: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; text-shadow: 0 1px 3px #000; }
.sb-line { display: block; height: 6px; width: 80px; border: 2px solid #fff; border-top: 0; }
.sb-text { font-size: 13px; font-weight: 700; }
.is-sky .scalebar, .is-sky .labels { display: none; }
.zoom-btns { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.zbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(15,20,56,.72); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; }
.zbtn:hover { background: rgba(60,50,140,.85); }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; padding: 20px; font-weight: 700; background: var(--space); }
.loading[hidden] { display: none; }
.loading.on { display: flex; background: rgba(3,4,15,.55); }
.fade { position: absolute; inset: 0; margin: 0; background: #03040f; opacity: 0; pointer-events: none; transition: opacity .22s; }
.fade.on { opacity: 1; }
.info { position: absolute; right: 10px; top: 64px; bottom: 10px; width: min(340px, calc(100% - 20px)); overflow-y: auto; background: rgba(12,16,46,.94); border: 1px solid rgba(180,163,255,.35); border-radius: 16px; padding: 14px 16px; color: #eef0fb; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.info[hidden] { display: none; }
.info-x { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; border-radius: 10px; }
.info-x:hover { background: rgba(255,255,255,.1); }
.info-t { font-size: 20px; margin: 4px 44px 0 0; }
.info-en { margin: 0 0 8px; color: #c3c8e6; font-size: 14px; }
.info-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.info-dl dt { color: #b4a3ff; font-weight: 700; }
.info-dl dd { margin: 0; }
.info-desc { font-size: 15px; margin: 10px 0; }
.info-fig { margin: 0; }
.info-fig img { width: 100%; height: auto; border-radius: 10px; display: block; background: #111733; }
.info-fig figcaption { font-size: 12px; color: #c3c8e6; margin-top: 4px; }
@media (max-width: 600px) {
  .stage { height: 68vh; min-height: 360px; }
  .info { top: auto; left: 10px; width: auto; max-height: 58%; }
}
.panel { margin-top: 10px; }
.pn-row { margin: 0 0 8px; color: var(--c-muted); }
.pn-row b { color: var(--lp-ink); }
.tog[aria-pressed="true"] { background: var(--c-soft); border-color: var(--lp-accent); color: var(--lp-accent-ink); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.objs { margin-top: 12px; }
.objs[hidden] { display: none; }
.objs-h { margin: 0 0 6px; font-weight: 700; font-size: 14px; color: var(--c-muted); }
.objs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.obj-btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
.sky-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.fld .lp-input, .fld select { min-height: 44px; }
.fld-wide { flex: 1 1 220px; }
.fld input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--lp-accent); }
.sky-list { margin-top: 10px; font-size: 15px; }
.sky-list ul { padding-left: 20px; margin: 4px 0; }
.next-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.next-btn { width: 100%; min-height: 48px; justify-content: flex-start; text-align: left; white-space: normal; }
.explain h3 { font-size: 19px; margin: 22px 0 6px; }

/* 수업 모드: 프로젝터용 큰 화면 */
.class-mode body { font-size: 19px; }
.class-mode .stage { height: 80vh; }
.class-mode .scene-tab, .class-mode .lp-btn { min-height: 54px; font-size: 18px; }
.class-mode .lab { font-size: 18px; }
.class-mode .lab.con { font-size: 16px; }
.class-mode .hud-t { font-size: 24px; }
.class-mode .hud-s, .class-mode .sb-text { font-size: 17px; }
.class-mode .zbtn { width: 56px; height: 56px; font-size: 28px; }
.class-mode .info { width: min(460px, calc(100% - 20px)); font-size: 18px; }
.class-mode .info-t { font-size: 26px; }
.class-mode .info-dl, .class-mode .info-desc { font-size: 18px; }

/* 가벼운 모드: 움직임 효과 줄이기 */
.lite .lab { transition: none; }
.lite .fade { transition: none; }
@media (prefers-reduced-motion: reduce) { .lab, .fade, .cat-card { transition: none; } }

/* 광고 자리 (지금은 숨김) */
.ad-slot[hidden] { display: none; }
/* Leapinity 의 다른 도구 */
.lp-more { margin-top: 40px; }
.lp-more-h { font-size: 20px; }
.lp-more-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lp-more-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--lp-card, #fff); border: 1px solid var(--c-line); text-decoration: none; color: var(--lp-ink); min-height: 64px; }
.lp-more-ic { width: 40px; height: 40px; flex: 0 0 auto; }
.lp-more-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lp-more-txt span { font-size: 13px; color: var(--c-muted); }
.lp-more-go { color: var(--c-muted); font-size: 22px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #161c3d; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.foot-cats a, .lp-foot-links a, .crumbs a, .bar-link { min-width: 44px; justify-content: center; }
.obj-btn { min-width: 44px; justify-content: center; }

/* 과학 실험실 (물리·화학) */
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.lab-view { min-width: 0; }
.lab-stage { height: min(56vh, 500px); min-height: 300px; touch-action: pan-y; }
.gbox { position: relative; height: 190px; margin-top: 8px; border-radius: 16px; overflow: hidden; background: #0b1030; }
.lab-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lab-modes[hidden], .gbox[hidden], .lab-custom[hidden], .lab-wide[hidden] { display: none; }
.lab-ctrls { display: flex; flex-direction: column; gap: 4px; }
.lab-ctrls .fld b { color: var(--lp-ink); }
.lab-h { font-size: 17px; margin: 4px 0 0; }
.lab-read { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 15px; background: var(--c-soft); border-radius: 14px; padding: 12px 14px; }
.lab-read dt { font-weight: 700; color: var(--lp-ink); }
.lab-read dd { margin: 0; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lab-note { margin: 0; color: var(--c-muted); font-size: 15px; }
@media (max-width: 900px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .lab-stage { height: 52vh; min-height: 280px; } .gbox { height: 170px; } .lab-read { grid-template-columns: 1fr; } .lab-read dd { margin-bottom: 4px; } }
.class-mode .lab-stage { height: 70vh; }
.class-mode .gbox { height: 260px; }
.class-mode .lab-read, .class-mode .lab-note { font-size: 19px; }
.class-mode .lab-grid { grid-template-columns: minmax(0, 1fr) 420px; }
@media (max-width: 900px) { .class-mode .lab-grid { grid-template-columns: minmax(0, 1fr); } }

/* 화학: 주기율표 · 분자 만들기 */
.lab-wide { margin-top: 14px; }
.ptable-wrap { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.ptable { display: grid; grid-template-columns: repeat(18, minmax(46px, 1fr)); grid-template-rows: repeat(7, auto) 10px auto auto; gap: 3px; min-width: 880px; }
.pt-el, .pt-gap { min-height: 52px; border-radius: 8px; border: 1.5px solid rgba(0,0,0,.12); color: #12142a; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 2px; font: inherit; cursor: pointer; }
.pt-gap { cursor: default; font-size: 11px; font-weight: 700; opacity: .85; }
.pt-el:hover { filter: brightness(1.07); }
.pt-el[aria-pressed="true"] { outline: 3px solid var(--lp-accent-ink); outline-offset: 1px; z-index: 1; }
.pt-n { font-size: 10px; font-weight: 700; color: #2a2f4a; }
.pt-s { font-size: 17px; font-weight: 800; }
.pt-k { font-size: 10px; font-weight: 700; color: #2a2f4a; white-space: nowrap; }
.c-alkali { background: #ffb8b8; } .c-alkaline { background: #ffd6a3; } .c-transition { background: #bfe0ff; } .c-post { background: #d3d7ea; }
.c-metalloid { background: #c2eed2; } .c-nonmetal { background: #fff0a0; } .c-halogen { background: #b3efe9; } .c-noble { background: #e2cfff; }
.c-lanthanide { background: #ffcfe8; } .c-actinide { background: #f6c8b6; }
.pt-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pt-legend li { color: #12142a; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.pt-src { font-size: 13px; margin: 8px 0 0; }
.lab-tip { margin: 0 0 8px; font-size: 14px; color: var(--c-muted); }
.mol-pal { gap: 6px; }
.mol-atom { min-width: 64px; flex-direction: column; gap: 0; line-height: 1.1; padding: 4px 10px; min-height: 52px; }
.mol-atom b { font-size: 18px; }
.mol-atom span { font-size: 11px; color: var(--c-muted); }
.mol-made { margin-top: 8px; }
.mol-made summary { min-height: 44px; display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 700; }
.mol-made-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--c-muted); }
.mol-made-list li.done { color: var(--lp-ink); font-weight: 700; }
.class-mode .pt-s { font-size: 20px; } .class-mode .pt-el { min-height: 60px; }
/* 📐 수학: 그래프 실험실 · 3D 도형 실험실 */
.gx-list { display: flex; flex-direction: column; gap: 8px; }
.gx-row { display: flex; gap: 6px; align-items: flex-start; }
.gx-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gx-in { width: 100%; min-height: 44px; font-size: 16px; font-family: inherit; }
.gx-in.bad { border-color: #d6336c; }
.gx-sw { flex: 0 0 auto; width: 34px; min-height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #12142a; font-weight: 800; }
.gx-del { min-width: 44px; padding: 0 10px; }
.gx-err { margin: 2px 0 0; font-size: 13px; color: var(--lp-ink); font-weight: 600; }
.gx-err:empty { display: none; }
.gx-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.gx-key { min-width: 44px; padding: 0 8px; font-weight: 800; }
.gx-pre { gap: 6px; }
.gx-explain { margin: 8px 0 0; font-size: 15px; background: var(--c-soft); border-radius: 14px; padding: 10px 12px; color: var(--lp-ink); }
.vtab-opts .fld { flex: 1 1 120px; }
.vtab-wrap { overflow-x: auto; margin-top: 8px; border-radius: 14px; border: 1px solid var(--c-line); }
.vtab { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; }
.vtab th, .vtab td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--c-line); white-space: nowrap; color: var(--lp-ink); }
.vtab thead th { background: var(--c-soft); }
.vtab tbody th { font-weight: 700; }
.qz-box { display: flex; flex-direction: column; gap: 8px; }
.qz-score { font-weight: 800; font-size: 17px; margin: 0; color: var(--lp-ink); }
.qz-q { margin: 0; font-size: 16px; color: var(--lp-ink); font-weight: 700; }
.qz-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qz-ch .lp-btn { justify-content: center; font-size: 16px; }
.qz-ch .lp-btn[data-r="ok"] { outline: 3px solid #2f9e44; outline-offset: 1px; }
.qz-ch .lp-btn[data-r="no"] { outline: 3px solid #d6336c; outline-offset: 1px; }
.qz-res { margin: 0; font-size: 15px; color: var(--lp-ink); }
.qz-res:empty { display: none; }
.sh-pal { gap: 6px; }
.class-mode .gx-in, .class-mode .vtab { font-size: 20px; }
.rv-pad { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 14px; touch-action: manipulation; cursor: crosshair; }