/* 홈 홍보 카드의 사용법 장면 — 색은 styles.css 의 토큰만 씁니다. 카드 크기가 어중간해도 글자·칸이 겹치지 않게, 장면 크기(cqw·cqh)에 비례해서 그립니다. */
.demo { position: relative; display: block; width: 100%; height: 100%; }
.demo-stage { position: absolute; inset: clamp(14px, 3vw, 28px) clamp(14px, 3vw, 28px) clamp(46px, 7vw, 58px); display: block; container-type: size; overflow: hidden; }
.demo-cap { position: absolute; left: 12px; right: 12px; bottom: clamp(12px, 2vw, 18px); text-align: center; font-size: .82rem; color: var(--muted); word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-cur { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--demo-cur); box-shadow: 0 0 0 2px rgba(58, 58, 66, .8), 0 0 0 7px rgba(58, 58, 66, .12), 0 2px 8px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: transform .75s cubic-bezier(.22, .61, .36, 1), opacity .3s; z-index: 2; }
.demo-cur.click { box-shadow: 0 0 0 2px rgba(58, 58, 66, .8), 0 0 0 12px rgba(58, 58, 66, .1), 0 2px 8px rgba(0, 0, 0, .3); }
.demo i, .demo em { font-style: normal; }
.dm-no { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--bg); font-size: clamp(.55rem, 2.6cqw, .75rem); color: var(--text); }
.dm-nm { display: block; width: 3.4em; height: 6px; border-radius: 3px; background: var(--line); }

/* 수업 교체 */
.dm-swap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(8px, 3cqw, 18px); align-items: center; height: 100%; }
.dm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: max(2px, .9cqw); width: min(56cqw, 118cqh); }
.dm-c { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 22%; background: var(--bg); font-size: clamp(.4rem, 2.2cqw, .68rem); line-height: 1; color: var(--muted); border: 1px dashed transparent; overflow: hidden; white-space: nowrap; transition: background .35s, color .35s, border-color .35s; }
.dm-c.free { background: none; border-color: var(--line); }
.dm-c.dm-src.on { background: var(--text); color: var(--bg); }
.dm-c.t { background: var(--surface2); border: 1px solid var(--muted); color: var(--text); font-size: clamp(.32rem, 1.6cqw, .52rem); }
.dm-c.pick { background: var(--text); color: var(--bg); border-color: var(--text); }
.dm-side { display: grid; gap: max(4px, 1.6cqh); align-content: center; min-width: 0; }
.dm-pill, .dm-form { display: grid; gap: 1px; min-width: 0; padding: max(5px, 1.6cqh) max(7px, 2.4cqw); border-radius: 12px; background: var(--bg); opacity: 0; transform: translateY(6px); overflow: hidden; transition: opacity .4s, transform .4s, background .3s, color .3s; }
.dm-pill b, .dm-form b { font-size: clamp(.55rem, 2.8cqw, .8rem); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-pill small { font-size: clamp(.48rem, 2.2cqw, .68rem); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-pill.show { opacity: 1; transform: none; } .dm-pill.gone { display: none; }
.dm-pill.on { background: var(--text); } .dm-pill.on b { color: var(--bg); } .dm-pill.on small { color: var(--bg); opacity: .7; }
.dm-form { display: none; } .dm-form.show { display: grid; opacity: 1; transform: none; }
.dm-pill.on ~ .dm-pill { }
.dm-form u { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--line); } .dm-form u + u { width: 70%; }
.dm-btn { justify-self: start; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surface2); font-size: clamp(.45rem, 2cqw, .64rem); color: var(--text); white-space: nowrap; transition: background .3s, color .3s; }
.dm-btn.on { background: var(--text); color: var(--bg); }
.dm-dl { display: none; padding: 5px 10px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: clamp(.5rem, 2.2cqw, .7rem); text-align: center; white-space: nowrap; }
.dm-dl.show { display: block; }

/* 점수 관리 */
.dm-score { display: grid; gap: max(6px, 2.4cqh); align-content: center; height: 100%; font-size: clamp(.6rem, 2.6cqw, .8rem); color: var(--muted); }
.dm-tabs { display: flex; gap: 6px; }
.dm-tabs i { padding: 3px 12px; border-radius: 999px; background: var(--bg); transition: background .3s, color .3s; white-space: nowrap; }
.dm-tabs i.on { background: var(--text); color: var(--bg); }
.dm-rank, .dm-grant { display: grid; gap: max(5px, 1.8cqh); }
.dm-grant, .dm-score.grant .dm-rank { display: none; } .dm-score.grant .dm-grant { display: grid; }
.dm-rrow { display: grid; grid-template-columns: 1.6em 1.6em 3.4em minmax(0, 1fr) 2em; gap: 8px; align-items: center; transition: background .5s; }
.dm-rrow.up { animation: dmUp .7s ease; }
@keyframes dmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dm-rk { font-weight: 600; color: var(--text); text-align: center; }
.dm-rrow em { text-align: right; color: var(--text); }
.dm-bar { display: flex; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.dm-bar u { display: block; height: 100%; background: var(--text); } .dm-bar u.b { opacity: .4; }
.dm-gh { display: grid; grid-template-columns: 1.6em 3.4em minmax(0, 1fr) minmax(0, 1fr); gap: 8px; font-size: .9em; }
.dm-gh em { grid-column: auto; text-align: center; } .dm-gh::before { content: ""; grid-column: 1 / 3; }
.dm-gr { display: grid; grid-template-columns: 1.6em 3.4em minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.dm-st { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dm-st i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--bg); color: var(--text); line-height: 1; transition: background .3s, color .3s; }
.dm-st i.tap { background: var(--text); color: var(--bg); }
.dm-st b { min-width: 1.2em; text-align: center; color: var(--text); font-weight: 600; } .dm-st b.pop { animation: dmPop .5s ease; }
@keyframes dmPop { 40% { transform: scale(1.4); } }

/* 가상 실험(자유낙하) */
.dm-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(10px, 3cqw, 22px); align-items: stretch; height: 100%; --y0: 52%; }
.dm-lab.tall { --y0: 18%; }
.dm-fall { position: relative; display: block; border-radius: 12px; background: var(--bg); overflow: hidden; }
.dm-gnd { position: absolute; left: 8%; right: 8%; bottom: 10%; height: 2px; background: var(--text); }
.dm-ball { position: absolute; top: var(--y0); width: clamp(10px, 4cqw, 20px); aspect-ratio: 1; border-radius: 50%; background: var(--text); transition: top .6s ease; }
.dm-ball.a { left: 28%; width: clamp(14px, 5.6cqw, 26px); } .dm-ball.b { left: 62%; }
.dm-lab.drop .dm-ball { top: calc(90% - clamp(10px, 4cqw, 20px)); transition: top 1.7s cubic-bezier(.55, .085, .68, .53); }
.dm-lab.drop .dm-ball.a { top: calc(90% - clamp(14px, 5.6cqw, 26px)); }
.dm-lp { display: grid; align-content: center; gap: max(8px, 3cqh); font-size: clamp(.55rem, 2.6cqw, .8rem); color: var(--muted); }
.dm-lr b { color: var(--text); font-size: clamp(1rem, 5cqw, 1.6rem); font-weight: 400; font-variant-numeric: tabular-nums; } .dm-lr em { display: block; }
.dm-lh b { color: var(--text); font-weight: 500; }
.dm-sl { position: relative; display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--bg); }
.dm-sl u { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--text); transition: width .6s ease; text-decoration: none; }
.dm-th { position: absolute; left: 40%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--text); transition: left .6s ease; }
.dm-lab.tall .dm-sl u { width: 70%; } .dm-lab.tall .dm-th { left: 70%; }
.dm-go { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--text); color: var(--bg); white-space: nowrap; transition: background .3s, color .3s; } .dm-go.on { background: var(--surface2); color: var(--text); }

/* 탐구 코치 */
.dm-iq { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: max(6px, 2.4cqh); height: 100%; font-size: clamp(.5rem, 2.4cqw, .72rem); color: var(--muted); }
.dm-lv { display: flex; gap: 4px; } .dm-lv i { padding: 2px 9px; border-radius: 999px; background: var(--bg); white-space: nowrap; transition: background .3s, color .3s; } .dm-lv i.on { background: var(--text); color: var(--bg); }
.dm-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.dm-ta { display: block; height: max(22px, 11cqh); padding: 6px 8px; border-radius: 10px; background: var(--bg); } .dm-ty { display: block; width: 0; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--muted); transition: width 1s steps(10); } .dm-ta.typed .dm-ty { width: 70%; }
.dm-mk { padding: 4px 10px; border-radius: 999px; background: var(--text); color: var(--bg); white-space: nowrap; transition: background .3s, color .3s; } .dm-mk.on { background: var(--surface2); color: var(--text); }
.dm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(5px, 1.6cqw); min-height: 0; }
.dm-ex { position: relative; display: grid; align-content: start; gap: max(3px, 1.2cqh); min-height: 0; padding: max(6px, 2cqh) max(6px, 1.8cqw); border-radius: 12px; background: var(--bg); overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.dm-iq.made .dm-ex { opacity: 1; transform: none; } .dm-iq.made .dm-ex:nth-child(2) { transition-delay: .25s; } .dm-iq.made .dm-ex:nth-child(3) { transition-delay: .5s; }
.dm-ex b { display: block; width: 70%; height: 5px; margin-right: 14px; border-radius: 3px; background: var(--text); }
.dm-ex u { display: block; height: 3px; border-radius: 2px; background: var(--line); } .dm-ex u + u { width: 80%; } .dm-ex u + u + u { width: 55%; }
.dm-ex s { display: block; width: 40%; height: 3px; border-radius: 2px; background: var(--muted); opacity: .6; }
.dm-cp { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--muted); transition: background .3s, border-color .3s; } .dm-cp.ok { background: var(--text); border-color: var(--text); }

/* 홈 카드 장면: 과학 개념 — 영역 목록 → 버스가 출발·정지할 때 몸이 쏠리는 작은 그림 */
.dm-cn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(10px, 3cqw, 22px); height: 100%; }
.dm-cnt { display: grid; align-content: center; gap: 8px; }
.dm-ar { display: block; padding: 8px 12px; border-radius: 12px; background: var(--bg); color: var(--muted); font-style: normal; transition: color .3s, background-color .3s; }
.dm-ar b { display: block; font-size: .8rem; font-weight: 600; color: inherit; } .dm-ar small { display: block; font-size: .68rem; opacity: .8; }
.dm-ar.pick { color: var(--text); background: var(--surface2); }
.dm-cnv { position: relative; display: block; border-radius: 12px; background: var(--bg); overflow: hidden; opacity: .35; transition: opacity .5s; }
.dm-cn.open .dm-cnv { opacity: 1; }
.dm-road { position: absolute; left: 0; right: 0; bottom: 20%; height: 2px; background: var(--text); }
.dm-road::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: repeating-linear-gradient(90deg, var(--muted) 0 14px, transparent 14px 28px); background-position: 0 0; }
.dm-cn.go .dm-road::after { animation: dmRoad .5s linear infinite; }
@keyframes dmRoad { to { background-position: -28px 0; } }
.dm-bus { position: absolute; left: 10%; right: 10%; top: 24%; bottom: 29%; border: 2px solid var(--text); border-radius: 10px; display: block; }
.dm-wh { position: absolute; bottom: -9px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text); background: var(--bg); } .dm-wh.a { left: 14%; } .dm-wh.b { right: 14%; }
.dm-cn.go .dm-wh { border-top-color: var(--muted); animation: dmSpin .6s linear infinite; } @keyframes dmSpin { to { transform: rotate(360deg); } }
.dm-pp { position: absolute; left: 46%; bottom: 3px; width: 0; height: 52%; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, .7, .3, 1); display: block; }
.dm-hd { position: absolute; left: -5px; top: 0; width: 10px; height: 10px; border: 2px solid var(--text); border-radius: 50%; box-sizing: border-box; }
.dm-bd { position: absolute; left: -1px; top: 11px; bottom: 0; width: 2px; background: var(--text); border-radius: 2px; }
.dm-cn.go .dm-pp { transform: rotate(-26deg); } .dm-cn.stop .dm-pp { transform: rotate(26deg); }

/* 빅히스토리 모션: 138억 년 줄 위에 문턱 8개가 차례로 켜지고, 우주·지구·생명·인류 이름이 이어짐 */
.dm-bhv { display: block; }
.dm-bhv em { position: absolute; font-style: normal; font-size: .62rem; color: var(--muted); white-space: nowrap; }
.dm-bhv .dm-t0 { left: 10%; top: 24%; } .dm-bhv .dm-t1 { right: 10%; top: 24%; }
.dm-trk { position: absolute; left: 10%; right: 10%; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--surface2); }
.dm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--text); }
.dm-bh.go .dm-fill { animation: dmFill 3.1s linear forwards; } @keyframes dmFill { to { width: 100%; } }
.dm-d { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--bg); box-sizing: border-box; transform: scale(.8); }
.dm-bh.go .dm-d { animation: dmDot .4s ease forwards; animation-delay: calc(var(--i) * .42s); } @keyframes dmDot { to { background: var(--text); transform: scale(1.35); } }
.dm-gl em { top: 66%; transform: translateX(-50%); color: var(--muted); transition: color .4s; }
.dm-bh.end .dm-gl em { color: var(--text); }

/* 기술 원리: 전자가 옆 빈자리로 옮겨 가고 양공은 거꾸로 움직임 */
.dm-tcv { display: block; }
.dm-row { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; }
.dm-sl2 { position: relative; display: block; width: clamp(14px, 7cqw, 26px); aspect-ratio: 1; }
.dm-e, .dm-hr { position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box; }
.dm-e { background: var(--text); transition: opacity .35s, transform .35s; }
.dm-hr { border: 2px dashed var(--muted); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .35s; }
.dm-sl2.hole .dm-e { opacity: 0; transform: scale(.4); } .dm-sl2.hole .dm-hr { opacity: 1; transform: none; }
.dm-tcv em { position: absolute; font-style: normal; font-size: .62rem; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .5s, color .4s; }
.dm-tcv .dm-lbe { left: 8%; top: 22%; } .dm-tcv .dm-lbh { right: 8%; bottom: 22%; }
.dm-tc.go .dm-lbe { opacity: 1; } .dm-tc.end .dm-lbh, .dm-tc.go .dm-lbh { opacity: 1; } .dm-tc.end .dm-tcv em { color: var(--text); }

/* 과학과 사람: 시험해 볼 수 있는지로 과학과 비과학을 가려 봄 */
.dm-shv { display: grid; align-content: center; gap: 6px; padding: 8px 10px; }
.dm-q { font-size: .72rem; color: var(--muted); text-align: center; }
.dm-st1 { display: block; padding: 6px 8px; border-radius: 10px; background: var(--surface2); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s, background-color .4s; }
.dm-st1 b { display: block; font-size: .66rem; font-weight: 500; color: var(--text); }
.dm-st1 em { display: block; margin-top: 2px; font-size: .58rem; color: var(--muted); opacity: 0; transition: opacity .5s; }
.dm-sh.go .dm-st1 { opacity: 1; transform: none; } .dm-sh.go .dm-st1.b { transition-delay: .35s; }
.dm-sh.end .dm-st1 em { opacity: 1; } .dm-sh.end .dm-st1.b { background: var(--text); } .dm-sh.end .dm-st1.b b, .dm-sh.end .dm-st1.b em { color: var(--bg); }