/* 가상 실험 > 시뮬레이션 화면 — 색·여백은 styles.css 토큰만 씁니다 */
.ls-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--gap-head); color: var(--muted); font-size: .9rem; } .ls-crumb b { color: var(--text); font-weight: 500; }
.ls-title { margin: var(--gap-head) 0 var(--gap-head); font-size: clamp(1.3rem, 2.6vw, 1.8rem); } .ls-desc { margin: 0 0 var(--gap-head); color: var(--muted); }
.ls { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-section); align-items: start; }
@media (max-width: 800px) { .ls { grid-template-columns: minmax(0, 1fr); } }
.ls-stage { border-radius: 24px; background: var(--surface); padding: clamp(8px, 2vw, 16px); }
.ls-stage canvas { display: block; width: 100%; height: min(72dvh, 520px); }
.ls-panel { display: grid; gap: var(--gap-head); }
.ls-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-head); margin: 0; }
.ls-read dt { color: var(--muted); font-size: .82rem; } .ls-read dd { margin: 4px 0 0; color: var(--muted); font-size: .86rem; word-break: keep-all; } .ls-read b.ls-s { font-size: 1.05rem; font-weight: 500; line-height: 1.4; } .ls-read b { color: var(--text); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 400; font-variant-numeric: tabular-nums; }
.ls-ctl { display: grid; gap: 8px; } .ls-ctl > span, .ls-ctl > label { color: var(--muted); font-size: .86rem; } .ls-ctl label b { color: var(--text); font-weight: 500; }
.ls-range { width: 100%; accent-color: var(--text); }
.ls-range{min-height:44px;margin:0;touch-action:pan-y}
.ls-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-note { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; word-break: keep-all; min-height: 3.2em; }
.link-tile .ls-n { color: var(--muted); font-size: .82rem; }

/* 좁은 화면(한 단, 폰 등): 그림을 고정하지 않고 화면 전체가 위에서 아래로 쭉 스크롤됨 (큰 화면의 두 단 고정 스크롤은 폰에서는 어색해서 쓰지 않음) */
@media (max-width: 800px) {
  .ls { gap: var(--gap-head); }
  .ls-stage { padding: 8px; }
  .ls-stage canvas { height: min(40dvh, 320px); }
  .ls-note { min-height: 0; }
}

/* 개념 체험관 > 전시물 화면(museum.js) — 해 보세요 · 왜 그럴까요 · 숫자로 던지기 */
.ms-try { display: grid; gap: 8px; padding: var(--pad-tile, 16px); border-radius: 20px; background: var(--surface); }
.ms-try b { font-size: .86rem; font-weight: 500; color: var(--muted); }
.ms-try ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 6px; font-size: .92rem; line-height: 1.55; word-break: keep-all; }
.ms-read { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ms-why, .ms-num { border-top: 1px solid var(--line); padding-top: var(--gap-head); }
.ms-why summary, .ms-num summary { cursor: pointer; font-size: .92rem; color: var(--text); }
.ms-why > div { margin-top: 8px; display: grid; gap: 8px; color: var(--muted); font-size: .92rem; line-height: 1.65; word-break: keep-all; }
.ms-why p, .ms-num .ls-ctl { margin: 0; } .ms-num { display: block; } .ms-num[open] > * + * { margin-top: var(--gap-head); }
.ms-simple { color: var(--text); font-size: .86rem; }
.ms .ls-stage canvas { cursor: crosshair; height: auto; aspect-ratio: 5 / 3; touch-action: pan-y; }   /* 그림 위에서도 손가락으로 페이지가 스크롤된다(끌어야 하는 것은 museum.js drag 가 따로 막음) */
.ms .btn, .ms .seg-ctl-b, .ls .btn, .ls .seg-ctl-b, .ls-stage { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }   /* 길게 누르는 단추·그림에서 글자가 선택되지 않게 */
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms .ls-stage canvas { max-height: 64dvh; } }   /* 가로로 둔 태블릿: 그림이 화면 높이를 거의 다 덮지 않게(아래 값·단추가 같이 보임) */
.ms.pd .ls-stage canvas { aspect-ratio: 5 / 6; } @media (max-width: 560px) { .ms.pd .ls-stage canvas { aspect-ratio: 5 / 7.4; } }   /* 좁은 화면에서는 표 아래의 원자 그림에 높이를 더 준다 */
.ms.og .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.cs .ls-stage canvas { aspect-ratio: 1 / 1; }
@media (max-width: 800px) { #state-cv { height: min(66dvh, 470px); } }   /* 물질의 상태: 좁은 화면에서는 입자 상자 아래 가열 곡선이 보이도록 높게 */
.ms.db .ls-stage canvas { aspect-ratio: 10 / 9; } @media (max-width: 560px) { .ms.db .ls-stage canvas { aspect-ratio: 5 / 5.6; } }   /* 에너지 장벽 그림이 들어가 조금 더 높게 */
.ms.rc .ls-stage canvas { aspect-ratio: 10 / 9; cursor: default; } @media (max-width: 560px) { .ms.rc .ls-stage canvas { aspect-ratio: 5 / 6.4; } }   /* 정류: 위에 회로, 아래에 입력·출력 파형 */
.ms.lg .ls-stage canvas { aspect-ratio: 5 / 3; } .ms.lg .seg-ctl { flex-wrap: wrap; } .ms.lg .seg-ctl-b { padding-inline: 8px; min-width: 0; }   /* 게이트가 여섯 가지라 좁은 화면에서 줄바꿈 */
.ms.mb .ls-stage canvas { aspect-ratio: 4 / 3; }   /* 세포막의 구조: 소낭이 떨어져 나갈 세로 공간 */
.ms.ad .ls-stage canvas { aspect-ratio: 5 / 3; } .ms.cc .ls-stage canvas { aspect-ratio: 4 / 3; }
.cards-fill { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }   /* 영역 카드가 한두 개뿐이어도 한 줄을 다 채우며 커지지 않게 */
.ls .btn, .ls .seg-ctl-b { min-height: 44px; }   /* 손가락으로 누르기 좋게 모든 단추를 44px 이상으로 */
.ms .seg-ctl { display: flex; width: 100%; } .ms .seg-ctl-b { flex: 1 1 auto; text-align: center; white-space: nowrap; }   /* 알약 선택줄: 칸이 줄 전체를 나눠 채운다 */
.ad-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ad-row > span { width: 3.2em; color: var(--muted); font-size: .9rem; } .ad-row > b { margin-left: 4px; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.ad-b { min-width: 46px; min-height: 46px; padding: 0; font-size: 1.15rem; font-weight: 800; } .ad-b[aria-pressed="true"] { background: var(--c1); color: var(--bg); }
.lg-sw { display: flex; gap: 10px; } .lg-b { min-height: 48px; min-width: 96px; font-size: 1.1rem; font-weight: 800; } .lg-b[aria-pressed="true"] { background: var(--c1); color: var(--bg); }   /* 입력 스위치: 켜짐이면 강조 색 */
.lg-tab { width: 100%; border-collapse: collapse; text-align: center; font-size: 1rem; } .lg-tab th { color: var(--muted); font-weight: 600; font-size: .86rem; padding: 6px 4px; border-bottom: 1px solid var(--line); } .lg-tab td { padding: 8px 4px; border-bottom: 1px solid var(--line); } .lg-tab tr.on td { background: var(--surface2); font-weight: 800; }
.cs-note { margin: 4px 0 8px; color: var(--text); font-size: .98rem; line-height: 1.5; word-break: keep-all; min-height: 3em; }
.og-read { grid-template-columns: minmax(0, 1fr); }   /* 세포 소기관: 이름과 하는 일을 한 줄씩 */
.og-read b { font-size: 1.25rem; }
.og-fn { font-size: .98rem; line-height: 1.5; color: var(--text); word-break: keep-all; min-height: 3em; }   /* 판의 경계: 가로 1400 km × 깊이 700 km 단면이 같은 비율로 들어가도록 */   /* 주기율표: 위에 표, 아래에 원자 그림이 모두 들어가도록 정사각형 */
@media (max-width: 800px) { .ms .ls-stage canvas { height: auto; } .ms-read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .ms.m43 .ls-stage canvas, .ms.m11 .ls-stage canvas { aspect-ratio: 4 / 3; } }   /* 관성·힘과 가속도·공 던지기·등속·등가속도는 좁은 화면에서 4:3 */
@media (max-width: 520px) { .ms.m11 .ls-stage canvas { aspect-ratio: 1 / 1; } }   /* 그래프가 둘인 등속·등가속도는 폰에서 1:1 */
/* 전시물: 오른쪽 설명·값·단추가 길면 페이지가 스크롤되고, 왼쪽 무대는 화면에 붙어 있다(두 칸이 따로 움직이는 느낌). 한 칸으로 합쳐지는 좁은 화면에서는 쓰지 않음 */
@media (min-width: 801px) { .ms .ls-stage { position: sticky; top: calc(var(--hdr-h, 69px) + 32px); } }

/* 개념 영상의 짝 시뮬레이션(museum-concept.js): 예측 상자, 영상 쪽 '직접 해 보기' 줄 */
.ic-pred { display: grid; gap: 8px; padding: var(--pad-tile, 16px); border-radius: 20px; background: var(--surface); }
.ic-pred b { font-size: .86rem; font-weight: 500; color: var(--muted); } .ic-pred p { margin: 0; font-size: .96rem; line-height: 1.55; word-break: keep-all; }
.ic-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-links { display: flex; }
.ic-links .link{min-height:44px;display:inline-flex;align-items:center}
.ic .ls-stage canvas { height: auto; min-height: 180px; }
@media (max-width: 800px) { .ic .ls-stage canvas { height: auto; } }

/* 관성 시뮬레이션: 누르고 있는 동안 작용하는 단추(스프링 모드)는 눌린 상태가 분명히 보이고, 손가락으로 누르기 편한 크기. 숫자는 폭이 같아 흔들리지 않게 */
.ic-h { min-height: 44px; padding-inline: 20px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease; }
.ic-h:active { transform: scale(.96); box-shadow: inset 0 2px 6px rgba(0,0,0,.28); }
.ms .ls-read b, .ic-read b { font-variant-numeric: tabular-nums; }
.ic-read2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 힘과 가속도 시뮬레이션: 힘·질량을 − / + 단추로 바꾸는 줄 */
.nt-steps { display: grid; grid-template-columns: max-content 44px minmax(1.6em, max-content) max-content 44px; align-items: center; justify-content: start; gap: 10px; }   /* 줄마다 열이 같은 자리에 오도록 한 격자로 맞춘다(이름·단위 길이가 달라도 − 값 + 가 정렬됨) */
.nt-step { display: contents; } .nt-step > span:first-child { white-space: nowrap; color: var(--muted); font-size: .86rem; padding-right: 4px; }
.nt-step .btn { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; line-height: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nt-step b { text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .nt-step > span:nth-child(4) { color: var(--muted); font-size: .86rem; margin-right: 4px; }
.ic-links { flex-wrap: wrap; gap: 6px 18px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 도핑과 n형·p형: 위에 결정 조각, 아래에 자유 전자·양공의 수 막대 */
.ms.dop .ls-stage canvas { aspect-ratio: 10 / 9; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.dop .ls-stage canvas { aspect-ratio: 5 / 6.4; } }
.dp-read dd { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .dp-read b { font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; white-space: nowrap; } .dp-read dd span { font-size: .78rem; min-height: 1.1em; } .dp-read sup { font-size: .62em; line-height: 0; }
.dp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); } .dp-dot.p { background: var(--c2); } .dp-dot.b { background: var(--warn); }
.cs-note sup { font-size: .7em; line-height: 0; }
.ms.dop .ls-btns { gap: 8px; } .ms.dop .ic-h { padding-inline: 14px; } .dp-dot { margin-right: 6px; }
.ms-why sup { font-size: .7em; line-height: 0; }

/* MOSFET 스위치: 위에 단면, 아래에 게이트 전압-드레인 전류 그래프 */
.ms.mo .ls-stage canvas { aspect-ratio: 10 / 9; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.mo .ls-stage canvas { aspect-ratio: 5 / 6.4; } }
.mo-read dd { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .mo-read b { font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; white-space: nowrap; } .mo-read dd span { font-size: .78rem; min-height: 1.1em; }
.ms.mo .ls-btns { gap: 8px; } .ms.mo .ic-h { padding-inline: 14px; }

/* CMOS 인버터: 위에 회로, 아래에 출력 전압·전원 전류 그래프 두 개 */
.ms.cm .ls-stage canvas { aspect-ratio: 10 / 11; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.cm .ls-stage canvas { aspect-ratio: 5 / 8.4; } }
.ms.cm .ls-btns { gap: 8px; } .ms.cm .ic-h { padding-inline: 14px; }

/* BJT 트랜지스터 증폭: 위에 npn 단면, 아래 출력 곡선(IC–VCE) */
.ms.bj .ls-stage canvas { aspect-ratio: 10 / 12; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.bj .ls-stage canvas { aspect-ratio: 5 / 9; } }
.ms.bj .ls-btns { gap: 8px; } .ms.bj .ic-h { padding-inline: 14px; flex: 1 1 0; }
.bj-vs { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; word-break: keep-all; }   /* 영상(옆으로 붙인 세 층)과 이 단면(위아래)의 그림 방식이 다르다는 한 줄 */
/* BJT(모바일): 그림이 길어 단추가 화면 밖으로 밀리므로 단추 줄을 화면 아래에 붙여 둠(누르는 동안 아래 곡선의 점을 봐야 해서) */
@media (max-width: 800px) { .ms.bj { row-gap: var(--gap-head); } .ms.bj .ls-panel { display: contents; }
  .ms.bj .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.bj .ic-h { flex: none; padding-inline: 6px; font-size: .88rem; line-height: 1.25; word-break: keep-all; } }

/* SRAM 한 칸의 기억: 위에 6T 셀 회로, 아래에 DRAM 칸과 전하가 새는 그래프. 세로로 길어 폰에서는 단추 줄(4칸)을 화면 아래에 붙여 둠 */
.ms.srx .ls-stage canvas { aspect-ratio: 10 / 13; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.srx .ls-stage canvas { aspect-ratio: 5 / 11.2; } }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.srx .ls-stage canvas { max-height: 90dvh; } }   /* 가로 태블릿: 위아래로 긴 그림이라 높이를 더 준다 */
.ms.srx .ls-btns { gap: 8px; } .ms.srx .ic-h { padding-inline: 14px; flex: 1 1 0; }
@media (max-width: 800px) { .ms.srx { row-gap: var(--gap-head); } .ms.srx .ls-panel { display: contents; }
  .ms.srx .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.srx .ic-h { flex: none; padding-inline: 3px; font-size: .84rem; line-height: 1.2; word-break: keep-all; white-space: normal; min-height: 44px; }
  .ms.srx .ls-stage { padding-inline: 4px; } }
.ms.srx .ls-read dd b, .ms.srx .ls-read dd span { white-space: nowrap; }
@media (max-width: 800px) { .ms.srx .ls-read dd { flex-direction: row; align-items: baseline; gap: 4px; } }

/* 능동 수송과 나트륨-칼륨 펌프: 위는 세포 밖, 아래는 세포 안. 막 단면이 세로로 길어 폰에서는 더 높게 */
.ms.ap .ls-stage canvas { aspect-ratio: 10 / 9; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.ap .ls-stage canvas { aspect-ratio: 5 / 6.4; } }
.ms.ap .ls-btns { gap: 8px; } .ms.ap .ic-h { padding-inline: 14px; }
.ap-atp[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); } .ap-atp[aria-pressed="false"] { color: var(--muted); }   /* ATP 있음 = 초록, 없음 = 흐리게 */

/* 세포 내 섭취와 분비: 위는 세포 밖, 아래는 세포 안. 막 단면이 세로로 길어 폰에서는 더 높게 */
.ms.en .ls-stage canvas { aspect-ratio: 10 / 9; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.en .ls-stage canvas { aspect-ratio: 5 / 6.4; } }
.ms.en .ls-btns { gap: 8px; } .ms.en .ic-h { padding-inline: 14px; }
.ms.en .ls-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 세포 신호 전달과 수용체: 위는 세포 밖과 막, 아래는 세포 안과 포화 그래프. 세로로 길어 폰에서는 더 높게 */
.ms.sg .ls-stage canvas { aspect-ratio: 10 / 11.6; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.sg .ls-stage canvas { aspect-ratio: 5 / 7.9; } }
.ms.sg .ls-btns { gap: 8px; } .ms.sg .ic-h { padding-inline: 14px; }
.sg-alt[aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); } .sg-alt[aria-pressed="false"] { color: var(--text); }

/* 래치와 기억(SR 래치): 위에 NOR 두 개와 되먹임 회로. 세로로 조금 길게. 누름 단추 세 개는 줄을 나눠 채움 */
.ms.lt .ls-stage canvas { aspect-ratio: 10 / 7; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.lt .ls-stage canvas { aspect-ratio: 5 / 4.6; } }
.ms.lt .ls-btns { gap: 8px; } .ms.lt .ic-h { padding-inline: 14px; flex: 1 1 auto; }
.lt-b[aria-pressed="true"] { background: var(--c1); color: var(--bg); }
.lt-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); } .lt-dot.s { background: var(--ok); } .lt-dot.r { background: var(--c2); } .lt-dot.b { background: linear-gradient(90deg, var(--c2) 50%, var(--ok) 50%); }
.lt-tab tr.bad td { color: var(--muted); } .lt-tab tr.bad.on td { color: var(--danger); }
.qb { text-decoration: overline; text-decoration-thickness: 1.5px; text-underline-offset: 0; }   /* Q̄: Q 위에 가로줄 */

/* 원근법과 소실점: 위는 눈에 보이는 모습, 아래는 거리–그림 속 키 그래프. 눈높이 단추 둘, 사람 단추 둘을 줄을 나눠 채움 */
.ms.ps .ls-stage canvas { aspect-ratio: 10 / 11.4; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.ps .ls-stage canvas { aspect-ratio: 5 / 6.6; } }
.ms.ps .ls-btns { gap: 8px; } .ms.ps .ic-h { padding-inline: 14px; flex: 1 1 40%; }

/* 세포 골격: 위는 세포 속, 아래는 같은 배율의 단면과 옆모습. 종류 고르기 + 단추 둘 */
.ms.cy .ls-stage canvas { aspect-ratio: 10 / 12.4; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.cy .ls-stage canvas { aspect-ratio: 5 / 9; } }
.ms.cy .ls-btns { gap: 8px; } .ms.cy .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.cy .cy-read b { white-space: normal; font-size: clamp(.98rem, 2vw, 1.25rem); line-height: 1.3; word-break: keep-all; } .ms.cy .cy-read dd span { font-size: .78rem; }
.ms.cy .seg-ctl-b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
.ms.cy [data-v="a"]::before { background: var(--danger); } .ms.cy [data-v="i"]::before { background: var(--c1); } .ms.cy [data-v="m"]::before { background: var(--ok); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.cy .ls-stage canvas { max-height: 82dvh; } }   /* 세포 골격: 위아래로 긴 그림이라 가로 태블릿에서도 높이를 더 준다(오른쪽 단추는 옆 칸에 있음) */

/* 코페르니쿠스와 지동설: 위는 지동설·천동설 두 그림, 아래는 하늘 위 위치 그래프. 행성 고르기 + 시간 단추 둘 */
.ms.cop .ls-stage canvas { aspect-ratio: 10 / 10.6; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.cop .ls-stage canvas { aspect-ratio: 5 / 7.2; } }
.ms.cop .ls-btns { gap: 8px; } .ms.cop .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.cop .cp-read b { white-space: normal; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.cop .cp-read dd span { font-size: .78rem; }
.ms.cop .seg-ctl { flex-wrap: wrap; } .ms.cop .seg-ctl-b { padding-inline: 8px; min-width: 0; }
.ms.cop .seg-ctl-b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
.ms.cop [data-v="me"]::before { background: var(--muted); } .ms.cop [data-v="ve"]::before { background: color-mix(in srgb, var(--warn) 30%, #fff); } .ms.cop [data-v="ma"]::before { background: var(--danger); } .ms.cop [data-v="ju"]::before { background: color-mix(in srgb, var(--warn) 60%, var(--muted)); } .ms.cop [data-v="sa"]::before { background: color-mix(in srgb, var(--warn) 70%, var(--ok)); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.cop .ls-stage canvas { max-height: 82dvh; } }

/* LED 발광: 위는 칩과 렌즈, 가운데는 에너지띠와 파장 색띠, 아래는 재료별 전압–전류 그래프. 재료 고르기 + 전압 단추 둘 */
.ms.le .ls-stage canvas { aspect-ratio: 10 / 11.6; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.le .ls-stage canvas { aspect-ratio: 5 / 8.4; } }
.ms.le .ls-btns { gap: 8px; } .ms.le .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.le .le-read b { white-space: normal; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.le .le-read dd span { font-size: .78rem; }
.ms.le .seg-ctl { flex-wrap: wrap; } .ms.le .seg-ctl-b { padding-inline: 8px; min-width: 0; }
.ms.le .seg-ctl-b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--dot); box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.le .ls-stage canvas { max-height: 82dvh; } }

/* 태양 전지: 위는 단면과 전구 회로, 가운데는 에너지띠, 아래는 전류–전압 곡선. 빛 색 고르기 + 빛 세기 단추 둘 */
.ms.pv .ls-stage canvas { aspect-ratio: 10 / 11.6; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.pv .ls-stage canvas { aspect-ratio: 5 / 8.6; } }
.ms.pv .ls-btns { gap: 8px; } .ms.pv .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.pv .pv-read b { white-space: normal; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.pv .pv-read dd span { font-size: .78rem; }
.ms.pv .seg-ctl { flex-wrap: wrap; } .ms.pv .seg-ctl-b { padding-inline: 8px; min-width: 0; }
.ms.pv .seg-ctl-b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--dot); box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.pv .ls-stage canvas { max-height: 82dvh; } }

/* 팽창하는 우주와 허블 법칙: 위는 은하 평면, 가운데는 거리–속도 그래프, 아래는 Hα 선. 시간 단추 둘 + 관측자 바꾸기 */
.ms.xe .ls-stage canvas { aspect-ratio: 10 / 12.4; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.xe .ls-stage canvas { aspect-ratio: 5 / 9.2; } }
.ms.xe .ls-btns { gap: 8px; flex-wrap: wrap; } .ms.xe .ic-h { padding-inline: 14px; flex: 1 1 40%; } .ms.xe .xe-o { flex: 1 1 100%; }
.ms.xe .xe-read b { white-space: nowrap; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.xe .xe-read dd span { font-size: .78rem; }
.ms.xe .xe-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--dot); box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.xe .ls-stage canvas { max-height: 82dvh; } }
.ms.xe .xe-read b small { font-size: .68em; font-weight: 600; color: var(--muted); }
/* 팽창하는 우주(모바일): 그림이 길어 단추가 화면 밖으로 밀리므로 시간 단추 줄을 화면 아래에 붙여 둠(그림 위를 누르며 보는 시뮬레이션이라) */
@media (max-width: 800px) { .ms.xe { row-gap: var(--gap-head); } .ms.xe .ls-panel { display: contents; }
  .ms.xe .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.xe .ic-h, .ms.xe .xe-o { flex: none; padding-inline: 6px; font-size: .88rem; line-height: 1.25; word-break: keep-all; } }

/* 전자기 유도(패러데이): 위는 자석·코일·검류계, 아래는 시간에 따른 선속 Φ 와 기전력 ε 그래프. 자석 넣기·빼기 단추 둘 */
.ms.fa .ls-stage canvas { aspect-ratio: 10 / 12; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.fa .ls-stage canvas { aspect-ratio: 5 / 8.2; } }
.ms.fa .ls-btns { gap: 8px; } .ms.fa .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.fa .fa-read b { white-space: nowrap; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.fa .fa-read dd span { font-size: .78rem; }
@media (orientation: landscape) and (min-width: 700px) { .ms.fa .ls-stage canvas { max-height: 74dvh; } }
/* 전자기 유도(넓은 화면): 단추 칸을 화면에 붙여 그래프를 보려고 내려가도 단추가 보임 */
@media (min-width: 801px) { .ms.fa .ls-panel { position: sticky; top: 76px; align-self: start; } }
@media (min-width: 561px) and (max-width: 800px) { .ms.fa .ls-stage canvas { max-height: 74dvh; } }
/* 전자기 유도(모바일): 그림이 길어 단추가 화면 밖으로 밀리므로 넣기·빼기 단추 줄을 화면 아래에 붙여 둠(그림을 보며 누르는 시뮬레이션이라) */
@media (max-width: 800px) { .ms.fa { row-gap: var(--gap-head); } .ms.fa .ls-panel { display: contents; }
  .ms.fa .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.fa .ic-h { flex: none; padding-inline: 6px; font-size: .95rem; line-height: 1.25; word-break: keep-all; } }

/* 에너지와 열(줄의 실험): 위는 추·도르래·물 용기·온도계, 아래는 에너지의 합 막대. 추 내리기·감아올리기·덮개 열기 단추 셋 */
.ms.he .ls-stage canvas { aspect-ratio: 10 / 10.8; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.he .ls-stage canvas { aspect-ratio: 5 / 8.2; } }
.ms.he .ls-btns { gap: 8px; flex-wrap: wrap; } .ms.he .ic-h { padding-inline: 14px; flex: 1 1 28%; }
.ms.he .he-read b { white-space: nowrap; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.3; } .ms.he .he-read dd span { font-size: .78rem; }
.ms.he .he-read b small { font-size: .68em; font-weight: 600; color: var(--muted); }
.ms.he .he-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--dot); box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1.5px rgba(127,127,127,.55); }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.he .ls-stage canvas { max-height: 82dvh; } }
/* 에너지와 열(모바일): 그림이 길어 단추가 화면 밖으로 밀리므로 단추 줄을 화면 아래에 붙여 둠(그림을 보며 누르는 시뮬레이션이라) */
@media (max-width: 800px) { .ms.he { row-gap: var(--gap-head); } .ms.he .ls-panel { display: contents; }
  .ms.he .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.he .ic-h { flex: none; padding-inline: 6px; font-size: .88rem; line-height: 1.25; word-break: keep-all; } }

/* 원핵세포와 진핵세포 비교: 위는 세균·진핵세포 두 칸(구조를 고르고 확대), 크기를 고르면 아래에 크기 눈금. 구조 여섯 가지라 좁은 화면에서 줄바꿈 */
.ms.prk .ls-stage canvas { aspect-ratio: 10 / 10.2; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.prk .ls-stage canvas { aspect-ratio: 5 / 6.4; } }
.ms.prk .seg-ctl { flex-wrap: wrap; } .ms.prk .seg-ctl-b { padding-inline: 8px; min-width: 0; }
.ms.prk .ls-btns { gap: 8px; } .ms.prk .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.prk .pk-read b { white-space: normal; font-size: clamp(.98rem, 2vw, 1.25rem); line-height: 1.3; word-break: keep-all; } .ms.prk .pk-read dd span { font-size: .78rem; }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.prk .ls-stage canvas { max-height: 82dvh; } }   /* 가로 태블릿: 위아래로 긴 그림이라 높이를 더 준다 */
@media (max-width: 800px) { .ms.prk { row-gap: var(--gap-head); } .ms.prk .ls-panel { display: contents; }   /* 폰·태블릿 세로: 그림이 길어 단추 줄을 화면 아래에 붙여 둠(누르는 동안 그림을 봐야 해서) */
  .ms.prk .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.prk .ic-h { flex: none; }
  .ms.prk .pk-read { display: none; } }   /* 폰·세로 태블릿: 칸 이름표와 눈금 띠가 같은 정보를 주므로 읽기판은 숨김(중복 금지) */

/* 우주의 주소: 위는 보이는 폭을 10배씩 넓히는 그림, 아래는 10의 거듭제곱 눈금 띠. 단추는 더 멀리·더 가까이 둘 */
.ms.spc .ls-stage canvas { aspect-ratio: 10 / 12.2; cursor: default; touch-action: pan-y; } @media (max-width: 560px) { .ms.spc .ls-stage canvas { aspect-ratio: 5 / 7.8; } }
.ms.spc .ls-btns { gap: 8px; } .ms.spc .ic-h { padding-inline: 14px; flex: 1 1 40%; }
.ms.spc .ls-read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms.spc .spc-read b { white-space: normal; font-size: clamp(.9rem, 1.7vw, 1.25rem); line-height: 1.3; word-break: keep-all; } .ms.spc .spc-read dd { min-height: 5rem; } .ms.spc .spc-read dd span { display: block; font-size: .78rem; }
@media (orientation: landscape) and (max-height: 860px) and (min-width: 700px) { .ms.spc .ls-stage canvas { max-height: 82dvh; } }
@media (max-width: 800px) { .ms.spc { row-gap: var(--gap-head); } .ms.spc .ls-panel { display: contents; }   /* 폰·태블릿 세로: 단추 줄을 화면 아래에 붙여 둠(누르는 동안 그림을 봐야 해서) */
  .ms.spc .ls-btns { position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.22); }
  .ms.spc .ic-h { flex: none; }
  .ms.spc .spc-read { display: none; } }   /* 폰·세로 태블릿: 알약과 눈금 막대·띠가 같은 크기 정보를 주므로 읽기판은 숨김(값은 aria-live 로 읽어 줌) */
.ms.ep .seg-ctl { flex-wrap: wrap; } .ms.ep .seg-ctl-b { padding-inline: 8px; min-width: 0; }   /* 기구 이름이 길어 좁은 화면에서 줄바꿈 */
.ms.em .seg-ctl { flex-wrap: wrap; } .ms.em .seg-ctl-b { padding-inline: 8px; min-width: 0; }   /* 좁은 화면에서 단추 줄바꿈 */
.ms.cap .lg-sw { flex-wrap: wrap; } .ms.cap .lg-b { min-width: 0; padding-inline: 10px; }   /* 좁은 화면에서 충전·방전 단추 줄바꿈 */
.ms.wd .ls-stage canvas { aspect-ratio: 4 / 3; }   /* 해륙풍: 화살표·글자가 많아 세로를 조금 더 */
.ms.bdw .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.pnw .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.stmw .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.inw .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.inw .inw-bits { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 6px 0 12px; }
.ms.inw .inw-g { display: flex; flex-direction: column; gap: 6px; }
.ms.inw .inw-gl { font-size: 12px; color: var(--muted); }
.ms.inw .inw-r { display: flex; gap: 6px; }
.ms.inw .inw-b { min-width: 44px; min-height: 44px; padding: 0; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ms.inw .inw-b[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.ms.cpuw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.cpuw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.prw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.prw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.clw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.clw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.mrw .ls-stage canvas { aspect-ratio: 4 / 3; }
.ms.ppw.lab-cp .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.ppw.lab-cp .ls-stage canvas { aspect-ratio: 4 / 5; } }   /* 칩+시간표처럼 빽빽한 그림은 모바일에서 세로로 더 길게(14px 글자가 겹치지 않도록) */
.ms.trw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.trw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.mcw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.mcw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.telw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.telw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.drw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.drw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.tqw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.tqw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.seaw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.seaw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.rotw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.rotw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.wvw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.wvw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.pfw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.pfw .ls-stage canvas { aspect-ratio: 4 / 5; } }
.ms.rfl .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.rfl .ls-stage canvas { aspect-ratio: 4 / 5; } }
.ms.atm .ls-stage canvas { aspect-ratio: 1 / 1; }
@media (max-width: 560px) { .ms.atm .ls-stage canvas { aspect-ratio: 4 / 5; } }
.ms.dfw .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.dfw .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.stm .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.stm .ls-stage canvas { aspect-ratio: 4 / 5; } }
.ms.ifr .ls-stage canvas { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .ms.ifr .ls-stage canvas { aspect-ratio: 1 / 1; } }

/* ── 스타일 시험판(잉크·종이, 2026-11): .ms.lab-ink 가 붙은 체험에만 적용된다. 라이트 = 아이보리 종이 + 검은 잉크, 다크 = 칠판 + 분필. 색은 이 토큰으로만(--danger 가 "지금 보라는 한 곳"의 강조색), 선은 얇게(museum.js inkCtx), 글자는 작은 세리프, 배경은 무지(격자 없음). ── */
.ms.lab-ink { --bg: #1e2a26; --surface: #24332e; --surface2: #2d3d37; --text: #ecebe2; --muted: #a4ada3; --line: rgba(236,235,226,.26); --inv-bg: #ecebe2; --inv-text: #1e2a26; --c1: #ecebe2; --c2: #98a398; --danger: #f0cf7a; --warn: #f0cf7a; --ok: #ecebe2; font-family: "Times New Roman", Times, "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif; }
:root[data-theme="light"] .ms.lab-ink { --bg: #f3efe4; --surface: #faf7ee; --surface2: #ece6d6; --text: #1d1c19; --muted: #6b665a; --line: rgba(29,28,25,.24); --inv-bg: #1d1c19; --inv-text: #faf7ee; --c1: #2a2924; --c2: #8a8474; --danger: #c44a2c; --warn: #c44a2c; --ok: #2a2924; }
.ms.lab-ink .ls-stage { border-radius: 4px; background-color: var(--surface);  border: 1px solid var(--line); box-shadow: 0 14px 24px -22px rgba(0, 0, 0, .55); }
.ms.lab-ink .btn { border-radius: 3px; background: transparent; border: 1px solid var(--text); color: var(--text); font-weight: 400; } .ms.lab-ink .btn.primary { background: var(--inv-bg); color: var(--inv-text); }
.ms.lab-ink .seg-ctl { border-radius: 3px; background: transparent; border: 1px solid var(--line); } .ms.lab-ink .seg-ctl-b { border-radius: 2px; } .ms.lab-ink .seg-ctl-b.on { background: var(--inv-bg); color: var(--inv-text); }
.ms.lab-ink .ls-read dt, .ms.lab-ink .ls-read dd { font-style: italic; } .ms.lab-ink .ls-read b { font-style: normal; color: var(--text); }
.ms.lab-ink .ms-why summary { font-style: italic; }

/* ── 체험 공통 틀 .lab-cp(스타일 시험판 3차): 영상 페이지와 같은 틀·치수. 체험 뷰 루트에 class "lab-cp" 한 단어만 붙이면 된다(그림 카드 .ls-stage + 안쪽 .ls-panel 의 안내 .cs-note · 단추줄 .cp-btns · 선택 .ls-ctl · 영상 보기 .cp-sim · 접힘 .ms-why 가 아래 순서대로 한 줄로 쌓인다). 색은 사이트 토큰(--surface·--surface2·--inv-bg)만 쓴다. ── */
.ms.lab-cp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 560px; margin-inline: auto; align-items: start; }
.ms.lab-cp .ls-panel { display: contents; }
.ms.lab-cp .ls-stage { order: 0; position: static; padding: 0; border: 0; box-shadow: none; border-radius: 24px; overflow: hidden; background: #2a2a2f; }   /* 영상 그림 카드와 같다: 다크 #2a2a2f, 라이트 --cp-bg */
:root[data-theme="light"] .ms.lab-cp .ls-stage { background: var(--cp-bg, #fbfaf5); }
.ms.lab-cp .ls-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; cursor: default; } @media (max-width: 560px) { .ms.lab-cp .ls-stage canvas { aspect-ratio: 1 / 1; } }
.ms.lab-cp .cs-note { order: 1; margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--text); word-break: keep-all; text-align: center; }
.ms.lab-cp .cp-btns { order: 2; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ms.lab-cp .ls-ctl { order: 3; display: grid; gap: 8px; justify-items: center; } .ms.lab-cp .ls-ctl > span { color: var(--muted); font-size: .86rem; }
.ms.lab-cp .ic-links { order: 4; margin: 0; } .ms.lab-cp .ms-why { order: 5; }
.ms.lab-cp .btn { min-height: 0; position: relative; } .ms.lab-cp .btn:not(.cp-sim) { transition: filter .2s ease, transform .1s ease, opacity .2s ease; }   /* '영상 보기'(.cp-sim)는 영상의 '직접 해 보기'와 같은 전역 .btn 규칙(전환·hover)을 그대로 쓴다 */   /* 단추 모양은 영상(concept.css)의 .btn · .cp-play · .cp-nav 를 그대로 쓴다: 재생 37px 알약, 이전·다음 40×40 원형. 높이는 늘리지 않고 눌리는 자리만 44px 이상으로 투명하게 넓힌다. */
.ms.lab-cp .btn:not(.cp-sim):disabled { opacity: .45; }
.ms.lab-cp .cp-play::after { content: ""; position: absolute; inset: -4px 0; } .ms.lab-cp .cp-nav::after { content: ""; position: absolute; inset: -2px; }
.ms.lab-cp .btn.cp-sim { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; grid-row: auto; grid-column: auto; background: var(--surface2); color: var(--text); }   /* 영상 보기: 영상 페이지의 '직접 해 보기' 넓은 알약과 같은 모양 */
.ms.lab-cp .cp-wts { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }   /* 선택: 영상 컨트롤 줄처럼 가벼운 작은 알약 묶음. 선택된 것은 영상의 .cp-scb[aria-expanded=true] 와 같은 표현(옅은 --surface2 바탕 + 글자색 --text) */
.ms.lab-cp .cp-step { display: inline-flex; align-items: center; gap: 8px; } .ms.lab-cp .cp-step > i { font-style: normal; font-weight: 600; font-size: .9rem; min-width: 3.2em; text-align: center; color: var(--text); }   /* 조절(−·+): 영상 원형 40px 버튼 둘 사이에 이름 */
.ms.lab-cp .cp-wt { display: inline-flex; align-items: center; gap: 4px; } .ms.lab-cp .cp-wt > em { font-style: normal; color: var(--muted); font-size: .86rem; margin-left: 2px; } .ms.lab-cp .cp-wt > i { font-style: normal; font-weight: 600; font-size: .86rem; color: var(--muted); min-width: 14px; text-align: center; }
.ms.lab-cp .seg-ctl { display: inline-flex; gap: 2px; width: auto; padding: 0; background: none; border-radius: 0; overflow: visible; }
.ms.lab-cp .seg-ctl-b { flex: none; position: relative; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: .86rem; font-weight: 500; height: 32px; min-height: 0; padding: 0 12px; transition: color .2s ease, background-color .2s ease; }
.ms.lab-cp .seg-ctl-b::after { content: ""; position: absolute; inset: -6px -2px; } .ms.lab-cp .seg-ctl-b:hover { color: var(--text); }
.ms.lab-cp .seg-ctl-b.on { background: var(--surface2); color: var(--text); }
.ms.lab-cp .ms-why { border-top: 0; padding: 16px 18px; border-radius: 20px; background: var(--surface); } .ms.lab-cp .ms-why summary { font-size: .95rem; }
.cp-pn.lab-cp-nav { max-width: 560px; margin: 14px auto 0; width: 100%; }   /* 이전·다음 개념 카드는 영상과 같은 .cp-pn(20px 모서리 --surface, 높이 68px) */
@media (min-width: 900px) { .cp-pn.lab-cp-nav { grid-column: auto; width: 100%; } }

/* .lab-cp 얇은 알약 슬라이더(연속값·단계 9 이상 예외) 와 '더 보기' */
.ms.lab-cp .cp-sl { display: inline-flex; align-items: center; gap: 10px; } .ms.lab-cp .cp-sl > label { font-size: .9rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.ms.lab-cp .cp-sl .ls-range { -webkit-appearance: none; appearance: none; background: transparent; width: min(220px, 52vw); min-height: 44px; margin: 0; }
.ms.lab-cp .cp-sl .ls-range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--surface2); }
.ms.lab-cp .cp-sl .ls-range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--surface2); }
.ms.lab-cp .cp-sl .ls-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 22px; border-radius: 999px; margin-top: -6px; background: var(--bg); border: 2px solid var(--text); }
.ms.lab-cp .cp-sl .ls-range::-moz-range-thumb { width: 30px; height: 18px; border-radius: 999px; background: var(--bg); border: 2px solid var(--text); }
.ms.lab-cp .cp-more { order: 3; } .ms.lab-cp .cp-more > summary { cursor: pointer; text-align: center; font-size: .9rem; color: var(--muted); list-style: none; padding: 8px; } .ms.lab-cp .cp-more[open] > summary { margin-bottom: 8px; }
.ms.lab-cp .cp-btns { align-items: center; }
.ms.lab-cp.lab-tall .ls-stage canvas { aspect-ratio: 4 / 3; } @media (max-width: 560px) { .ms.lab-cp.lab-tall .ls-stage canvas { aspect-ratio: 4 / 5; } }   /* 그림이 빽빽한 체험(def.cp.tall): 카드를 세로로 더 길게 */
.ms.lab-cp .cs-note:empty { display: none; }

/* ── 표준 규격 .lab-std(2026-11-01 합의, 관성 시제품): .lab-cp 위에 얹는다. 그림 카드는 영상과 같은 1:1·24px·영상 바탕(폭 ≤676px, 높이 ≤ 화면 높이−160px), 폭 ≥1024 이고 높이 ≥700 이면 그림(왼쪽)+컨트롤 열(오른쪽 280px, sticky)의 2열, 그 밖에는 1열. 가로 폰(높이 <500)은 2열(컨트롤 240px). 세로 폰은 조작 단추 줄이 화면 아래에 붙는 바. ── */
.ms.lab-std { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: none; width: 100%; margin-inline: auto; align-items: start; }
.ms.lab-std .cp-main { display: grid; gap: 12px; justify-items: center; align-content: start; min-width: 0; }
.ms.lab-std .cp-side { display: contents; }   /* 1열: 컨트롤 열의 자식들이 .ms 격자의 칸이 되어, 아래에 붙는 단추 줄(sticky)이 그림 전체 구간 동안 따라다닌다. 2열에서는 아래 미디어쿼리가 다시 하나의 열로 묶는다 */
.ms.lab-std > :is(.cp-predict, .cp-btns, .cp-aux, .ms-why, .ic-links, .cp-pn) { width: 100%; max-width: 560px; justify-self: center; min-width: 0; }
.ms.lab-std .cp-side > * { order: 0 !important; }
.ms.lab-std .ls-stage { order: 0; position: static; width: min(100%, 676px, max(240px, calc(100svh - 160px))); aspect-ratio: 1 / 1; padding: 0; border: 0; box-shadow: none; border-radius: 24px; overflow: hidden; background: #2a2a2f; margin-inline: auto; }
:root[data-theme="light"] .ms.lab-std .ls-stage { background: var(--cp-bg, #fbfaf5); }
.ms.lab-std.lab-cp .ls-stage canvas { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; }
.ms.lab-std .cs-note { order: 0; margin: 0; width: 100%; max-width: 676px; text-align: center; font-weight: 600; font-size: 1rem; line-height: 1.5; word-break: keep-all; }
.ms.lab-std .cp-hl { color: var(--cp-red, #e0474c); font-weight: 800; }
.ms.lab-std .cs-note { box-sizing: border-box; padding: 12px 20px; border: 2.5px solid var(--text); border-radius: 24px; background: var(--surface); }   /* 영상 장면 아래 캡션 띠(둥근 펜 테두리·종이색 바탕)와 같은 모양, 핵심어만 빨강 */
.ms.lab-std .cp-predict { display: grid; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--surface); }
.ms.lab-std .cp-predict[hidden] { display: none; }
.ms.lab-std .cp-q { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.45; word-break: keep-all; }
.ms.lab-std .cp-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.ms.lab-std .cp-pick { min-height: 44px; border-radius: 999px; background: var(--surface2); color: var(--text); font-weight: 600; justify-content: center; }
.ms.lab-std .cp-pick[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: -2px; }
.ms.lab-std .cp-res { margin: 0; min-height: 1.45em; font-weight: 600; line-height: 1.45; word-break: keep-all; color: var(--text); }
.ms.lab-std .cp-btns { order: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ms.lab-std .cp-btns .btn { width: 100%; justify-content: center; min-width: 0; }
.ms.lab-std .cp-btns .btn.ghost { background: var(--surface); }
.ms.lab-std .ic-links { order: 0; margin: 0; }
/* 5상태: hover(한 단계 진하게)·focus-visible(2px 외곽선)·active(눌림)·disabled(.4) — 알약 단추·원형 단추·'왜 그럴까요?'·영상 단추·선택 단추에 같은 규칙 */
.ms.lab-std .ms-why > summary { cursor: pointer; border-radius: 12px; margin: -6px -8px; padding: 6px 8px; }
.ms.lab-std .ms-why > summary:hover { background: var(--surface2); }
.ms.lab-std :is(.btn:not(.cp-sim), .ms-why > summary, .cp-pick):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ms.lab-std :is(.btn:not(.cp-sim), .cp-pick):disabled { opacity: .4; }
@media (min-width: 1024px) and (min-height: 600px) { .ms.lab-std { grid-template-columns: auto 280px; justify-content: center; column-gap: 32px; } .ms.lab-std .cp-side { display: grid; gap: 12px; align-content: start; min-width: 0; position: sticky; top: 80px; width: 280px; max-width: 280px; } .ms.lab-std .ls-stage { margin-inline: 0 auto; } .ms.lab-std .cp-main { justify-items: start; } .ms.lab-std .cs-note { justify-content: flex-start; text-align: left; } .ms.lab-std .ls-stage { width: min(676px, max(300px, calc(100svh - var(--cp-top, 250px) - 60px))); } .ms.lab-std .cs-note { max-width: 100%; } }   /* 2열: 카드 위쪽 머리글 높이(--cp-top, 체험이 재서 넣음)와 카드 아래 여백(약 60px)을 빼서 그림+컨트롤이 스크롤 없이 한 화면에 */
@media (max-height: 499px) and (min-width: 560px) { .ms.lab-std { grid-template-columns: auto 240px; justify-content: center; column-gap: 20px; } .ms.lab-std .cp-side { display: grid; gap: 12px; align-content: start; min-width: 0; position: sticky; top: 76px; width: 240px; max-width: 240px; } .ms.lab-std .ls-stage { width: min(676px, calc(100svh - 80px)); margin-inline: 0 auto; } .ms.lab-std .cs-note { max-width: 100%; } .ms.lab-std .cp-main { justify-items: start; } }
@media (max-width: 1023px) and (orientation: portrait) { .ms.lab-std .cp-side:has(.cp-predict:not([hidden]):not([data-done])) .cp-btns { position: static; background: none; backdrop-filter: none; padding: 0; } .ms.lab-std .cp-btns { position: sticky; bottom: 10px; z-index: 4; padding: 8px; border-radius: 28px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); } .ms.lab-std .cp-btns { grid-template-columns: 1fr 1fr; } }
.ms.lab-std { padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)); }
@media (max-width: 600px) { .ms.lab-std { padding-inline: 0; } }
.ms.lab-std .cp-pick { padding-inline: 6px; min-width: 0; }

/* 검수 반영(관성): 한 줄 안내는 캔버스 안 캡션 띠로 옮기고 DOM 은 화면 낭독기용(보이지 않음), 누르기 안내·단추 높이 44px·예측 결과 자리 예약·1열에서는 항상 아래에 붙는 단추 바(예측이 남았으면 예측 바) */
.ms.lab-std .cs-note { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; background: none; }
.ms.lab-std .cp-hint { margin: -4px 0 0; text-align: center; font-size: .86rem; color: var(--muted); }
.ms.lab-std :is(.btn.cp-play, .cp-pick) { min-height: 44px; }
.ms.lab-std .ms-why > summary { min-height: 44px; display: flex; align-items: center; }
.ms.lab-std .cp-aux .btn { width: 100%; }
.ms.lab-std .ms-more { margin-top: 8px; } .ms.lab-std .ms-more > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: 6px 0; } .ms.lab-std .ms-more > summary:hover { text-decoration: underline; }
.ms.lab-std .cp-predict:not([data-done]) .cp-res { display: none; }
.ms.lab-std .cp-btns { position: sticky; bottom: 10px; z-index: 4; padding: 8px; border-radius: 28px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); grid-template-columns: 1fr 1fr; }
.ms.lab-std .cp-side:has(.cp-predict:not([hidden]):not([data-done])) .cp-btns { position: static; background: none; backdrop-filter: none; padding: 0; }
.ms.lab-std > .cp-predict:not([hidden]):not([data-done]) { position: sticky; bottom: 10px; z-index: 4; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-btns { position: static; background: none; backdrop-filter: none; padding: 0; grid-template-columns: 1fr; } .ms.lab-std .cp-res { min-height: 7em; } .ms.lab-std .cp-predict:not([data-done]) .cp-res { display: block; } }

/* '영상 보기' 단추 = 영상 페이지 '직접 해 보기' 컴포넌트(.btn.primary.cp-sim) 그대로 — 체험 쪽에서 모양을 따로 정하지 않는다. 1열에서는 카드 폭 전체 */
.ms.lab-std > .ic-links { max-width: 676px; }

/* 이전·다음 개념 카드는 컨트롤 블록 맨 끝(영상 보기 아래)에 같이 움직인다: 1열은 .ms 격자의 마지막 칸, 2열은 sticky 컨트롤 열 안(좁은 열이라 세로로 쌓음). 카드 모양(.cp-pn-b)은 영상 것 그대로 */
.ms.lab-std > .cp-pn { margin: 0; width: 100%; max-width: 560px; grid-column: auto; }

/* 재검수 반영: 컨트롤 열은 안쪽 스크롤 없이 페이지 스크롤로 끝까지 닿고(이전/다음 카드 포함), 그림 열도 함께 sticky, 예측 결과 자리·여백을 줄여 열 높이 축소, 1열 카드 높이는 머리글 높이를 반영해 질문·단추가 첫 화면에 */
.ms.lab-std .cp-predict { padding: 14px 16px; gap: 8px; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-main { position: sticky; top: 76px; } .ms.lab-std .cp-res { min-height: 5.8em; } }
@media (max-width: 1023px), (max-height: 599px) { .ms.lab-std .ls-stage { width: min(100%, 676px, max(240px, calc(100svh - 160px)), max(240px, calc(100svh - var(--cp-top, 217px) - 150px))); } }
@media (max-width: 1023px) and (orientation: portrait) { .ms.lab-std .ls-stage { width: min(100%, 676px, max(240px, 58svh), max(240px, calc(100svh - var(--cp-top, 217px) - 150px))); } }

/* 표준 규격 2차(2026-11-01 사용자 결정): 그림 안 상시 캡션 띠 삭제, 조작 단추는 대칭 쌍+원형 처음으로, 눌림·속도선으로 어포던스, 그룹 사이 24~32px. 5차: 상태 문장 없음(설명은 '왜 그럴까요?'), 값은 카드 안 읽기 패널 하나(.cp-rd) */
.ms.lab-std .cp-predict { background: none; padding: 0; gap: 0; border-radius: 0; }
.ms.lab-std .cp-btns { grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: center; }
.ms.lab-std .cp-btns .btn.cp-nav { width: 44px; height: 44px; justify-self: end; padding: 0; justify-content: center; }
.ms.lab-std .ms-why { margin-top: 12px; } .ms.lab-std .cp-g3 { display: grid; gap: 10px; margin-top: 12px; }
.ms.lab-std > .cp-g3 { width: 100%; max-width: 560px; justify-self: center; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-btns { grid-template-columns: 1fr 1fr 44px; } }

/* 3차 재검수 반영(관성): ①글+예측+조작을 .cp-act 한 덩어리로 묶어 1열에서는 화면 아래 시트로 같이 붙임(가림·흔들림 해소, 직계 자식 선택자는 display:contents 안에서 안 맞아 .cp-side > * 로 교체) ②단추 눌림은 전환 없이 즉시 ③카드 높이는 시트 높이를 반영 */
.ms.lab-std .cp-act { display: grid; gap: 12px; }
.ms.lab-std .cp-btns, .ms.lab-std .cp-side:has(.cp-predict:not([hidden]):not([data-done])) .cp-btns { position: static; padding: 0; margin: 0; background: none; backdrop-filter: none; }
.ms.lab-std .cp-side > * { width: 100%; max-width: 560px; justify-self: center; min-width: 0; }
.ms.lab-std > .cp-side > .cp-act { position: sticky; bottom: 8px; z-index: 5; padding: 10px; border-radius: 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-side > * { max-width: none; } .ms.lab-std .cp-side > .cp-act { position: static; padding: 0; background: none; backdrop-filter: none; box-shadow: none; } }
@media (max-width: 1023px), (max-height: 599px) { .ms.lab-std .ls-stage { width: min(100%, 676px, max(240px, calc(100svh - 160px)), max(240px, calc(100svh - var(--cp-top, 217px) - 250px))); } }
@media (max-width: 1023px) and (orientation: portrait) { .ms.lab-std .ls-stage { width: min(100%, 676px, max(240px, 58svh), max(240px, calc(100svh - var(--cp-top, 217px) - 250px))); } }

/* 관성 4차: 알약·예측 삭제에 따라 예측 전용 규칙은 쓰지 않음(컴포넌트는 museum.js 에 보존). 접이식 '왜 그럴까요?'(.ms-why) 표준: 펼침 표시(.ms-why-i)·열림 배경·부드러운 높이 전환·한 덩어리 카드·5상태 */
.ms-why-i { display: none; }
.ms.lab-cp .ms-why { padding: 0; border-radius: 20px; background: var(--surface); transition: background-color .2s ease; interpolate-size: allow-keywords; }
.ms.lab-cp .ms-why[open] { background: var(--surface2); }
.ms.lab-cp .ms-why > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 14px 18px; border-radius: 20px; cursor: pointer; list-style: none; font-size: .95rem; transition: background-color .15s ease; }
.ms.lab-cp .ms-why > summary::-webkit-details-marker { display: none; }
.ms.lab-cp .ms-why > summary:hover { background: var(--surface2); } .ms.lab-cp .ms-why[open] > summary:hover { background: color-mix(in srgb, var(--surface2) 88%, var(--text)); }
.ms.lab-cp .ms-why > summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ms.lab-cp .ms-why > div { margin: 0; padding: 0 18px 16px; border: 0; }
.ms.lab-cp .ms-why-i { display: inline-block; position: relative; width: 22px; height: 22px; flex: none; color: var(--muted); transition: transform .25s ease; }
.ms.lab-cp .ms-why-i::before { content: ""; position: absolute; left: 6px; top: 4px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ms.lab-cp .ms-why[open] .ms-why-i { transform: rotate(180deg); color: var(--text); }
.ms.lab-cp .ms-why::details-content { block-size: 0; overflow: clip; transition: block-size .28s ease, content-visibility .28s allow-discrete; }
.ms.lab-cp .ms-why[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .ms.lab-cp .ms-why::details-content, .ms.lab-cp .ms-why-i, .ms.lab-cp .ms-why { transition: none; } }

/* 관성 4차 재검수 반영: ①펼침 표시를 원형 배지 안 ⌄(펼치면 회전, 배경 반전)로 강화 ②펼친 설명은 높이 상한+내부 스크롤(열림 중에도 단추·그림이 화면 밖으로 밀려나지 않음) ③1열 하단 시트는 흐름의 맨 끝(order)에 두어 .ms 전체 구간 동안 화면 아래에 붙음 ④손 아이콘 위치·대비 ⑤'왜 그럴까요?' 높이 44~48 */
.ms.lab-cp .ms-why-i { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); color: var(--text); transition: transform .25s ease, background-color .2s ease; }
.ms.lab-cp .ms-why-i::before { left: 9px; top: 7px; }
.ms.lab-cp .ms-why[open] .ms-why-i { background: var(--surface); }
.ms.lab-cp .ms-why > summary { min-height: 44px; padding: 8px 12px 8px 18px; }
.ms.lab-cp .ms-why > div { max-height: min(16em, 38svh); overflow-y: auto; overscroll-behavior: contain; margin-right: 6px; padding-right: 12px; }
.ms.lab-std .ms-why > summary:focus-visible, .ms.lab-std :is(.btn:not(.cp-sim), .ms-why > summary, .cp-pick):focus-visible { outline-offset: -2px; }
.ms.lab-std > .cp-side > .cp-act { order: 99; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std > .cp-side > .cp-act { order: 0; } }


/* 5차 재검수 반영: 조작 단추 위계(가속 쌍이 가장 진하게, 영상 보기는 한 단계 낮춤), '왜 그럴까요?' 요약 굵게·펼친 높이 확대 */
.ms.lab-cp .ms-why > summary { font-weight: 700; }
.ms.lab-cp .ms-why > div { max-height: min(24em, 46svh); }

/* 5차-2(사용자 지적): 영상에 없는 새 스타일 금지 — 조작 단추는 영상 부품 그대로(.btn.primary.cp-play = 옅은 회색 --surface2·테두리 없음·높이 37·14.4px/500, 원형 .cp-nav 40px), 단추들을 감싸는 박스·테두리·그림자·구분선 없음(.cp-btns 는 투명한 배치 줄), 하단 시트는 배경만 페이지 바탕, 읽기값은 DOM 박스가 아니라 장면 캔버스 안 알약 */
.ms.lab-std .cp-btns { display: flex; gap: 8px; align-items: center; justify-content: stretch; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; }
.ms.lab-std .cp-btns .btn.cp-play { flex: 1 1 0; min-width: 0; min-height: 0; padding: 9px 8px; font-size: .9rem; font-weight: 500; box-shadow: none; justify-content: center; }
.ms.lab-std .cp-btns .btn.cp-nav { flex: none; width: 40px; height: 40px; padding: 0; }
.ms.lab-std :is([data-hold], [data-press]) { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ms.lab-std :is([data-hold], [data-press]).is-down { filter: brightness(.94); transform: none; box-shadow: none; }
:root[data-theme="dark"] .ms.lab-std :is([data-hold], [data-press]).is-down { filter: brightness(1.18); }
.ms.lab-std > .cp-side > .cp-act { padding: 8px 0; border-radius: 0; background: var(--bg); backdrop-filter: none; box-shadow: none; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std > .cp-side > .cp-act { padding: 0; background: none; } }
.ms.lab-std .cp-side > * { max-width: var(--cp-card-w, 560px); }   /* 1열: 단추 줄·왜·영상 보기의 좌우 끝을 그림 카드 폭에 맞춘다(영상 페이지처럼 끝선 일치) */
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-side > * { max-width: none; } }

/* 5차-4(사용자 지적): 컨트롤 열의 간격·단추 치수를 개념 영상 페이지와 같은 값·같은 변수(--cp-gap 14px, --cp-gap-s 10px)로: 그림→단추 줄→'왜 그럴까요?'→영상 보기→이전·다음 카드 */
.ms.lab-std { gap: var(--cp-gap); }
.ms.lab-std .cp-btns { gap: var(--cp-gap); }
.ms.lab-std .ms-why, .ms.lab-std .cp-g3 { margin-top: 0; }
.ms.lab-std .cp-g3 { gap: var(--cp-gap-s); }
.ms.lab-std > .cp-side > .cp-act { margin: -8px 0; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-side { gap: var(--cp-gap); } .ms.lab-std > .cp-side > .cp-act { margin: 0; } }

/* 6차(사용자 요청: 영상과 같은 크기·움직임): 체험 그림 카드의 폭을 영상 .cp-stage 와 같은 변수·같은 식(--cp-h, --cp-s, concept.css)으로. 676px 상한 없음. 가로 폰(높이<500)만 기존 규칙 */
.ms.lab-std .ls-stage { width: min(100%, max(240px, var(--cp-h))); }   /* 1열 최소 240(작은 폰에서 하단 시트가 그래프를 덜 가리게) */
@media (min-width: 1024px) and (min-height: 600px) { .ms.lab-std .ls-stage { width: var(--cp-s); } }   /* 2열일 때만 영상의 --cp-s(오른쪽 열 자리를 뺀 식). 1열(900~1023 포함)은 위 식 */
@media (max-height: 499px) and (min-width: 560px) { .ms.lab-std .ls-stage { width: min(676px, calc(100svh - 80px)); } }   /* 가로 폰만 기존 규칙 */
@media (min-width: 1024px) and (min-height: 600px) { .ms.lab-std { column-gap: 32px; } }   /* 그림↔컨트롤 열 간격은 영상 .cp 의 열 간격(32px)과 같다 */
@media (max-height: 499px) and (min-width: 560px) { .ms.lab-std { column-gap: 20px; } }
.ms.lab-std.lab-cp .ls-stage canvas { max-height: none; }   /* 옛 가로 화면 규칙(.ms .ls-stage canvas max-height 64dvh)이 .lab-std 카드의 1:1 캔버스를 잘라 아래에 빈 띠가 생기던 문제 */

/* 조작 부품이 여러 개일 때(예: 힘과 가속도): 변수마다 독립된 줄(− 이름 +), 박스 없음, 간격은 영상 변수 */
.ms.lab-std .cp-wts { justify-content: stretch; gap: var(--cp-gap); }
.ms.lab-std .cp-step { width: 100%; gap: var(--cp-gap); }
.ms.lab-std .cp-step > i { flex: 1; min-width: 0; }
.ms.lab-std .cp-side .cp-pn { margin: 0; width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column: auto; }   /* 이전·다음 개념: 영상과 같은 두 칸(이전 왼쪽, 다음 오른쪽 — 이전이 없으면 왼쪽 칸이 비어 있다) */
.ms.lab-std .cp-act { gap: var(--cp-gap); }   /* 조작 줄들(변수 줄·밀기 줄)은 영상 간격 변수로 */
.ms.lab-std .cp-act > * { order: 0; }   /* 시트 안 줄 순서는 DOM 순서(변수 줄 → 밀기 줄)대로: 공용 .cp-wts order:3 이 뒤집지 않게 */
.ms.lab-std .cp-wts > .cp-step { flex: 1 1 0; width: auto; min-width: 0; }   /* 줄 끝에 원형 처음으로 같은 단추가 함께 올 때 조절 묶음이 남는 폭을 쓴다 */
.ms.lab-std .ic-links { display: grid; gap: var(--cp-gap-s); }   /* 영상 보기 단추가 둘 이상일 때 영상 변수 간격 */
.ms.lab-std .cp-slot { flex: none; width: 40px; height: 40px; }   /* 변수 줄 끝의 빈 칸(처음으로 원형 자리): 세 줄의 이름·− + 가 같은 자리에 정렬 */
.ms.lab-std .cp-pn-t small { word-break: keep-all; }   /* '다음 개념 · 준비 중' 이 단어 중간에서 끊기지 않게(체험 카드만) */
/* 원핵·진핵 비교(2026-11-01): 선택 묶음 = 영상 재생 알약 모양 그대로(.btn.cp-play) 5개 + 원형 ↺. 선택은 열린 '왜 그럴까요?' 와 같은 옅은 배경 변화 + 굵은 글자(테두리·그림자·굵기 변경 없음). 2열 280px 열은 2열×3줄, 1열 하단 시트는 3열×2줄 */
.ms.lab-std .cp-pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-gap-s); align-items: center; }
.ms.lab-std .cp-pkg { display: contents; }
.ms.lab-std .cp-pkb { min-width: 0; padding-inline: 6px; color: var(--text); font-weight: 500; }
.ms.lab-std .cp-pk > .cp-nav { justify-self: center; padding: 0; }
@media (min-width: 1024px) and (min-height: 600px), (max-height: 499px) and (min-width: 560px) { .ms.lab-std .cp-pk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 원핵·진핵 비교 재검수 반영: 선택 알약은 영상 재생 알약(.btn.primary.cp-play 와 같은 #efefef, 높이 37px, 눌리는 자리는 ::after 로 44px)과 같은 모양이고, 고른 것만 한 단계 진한 바탕(.ms-why 열림과 같은 color-mix)+굵은 글자. ↺ 는 영상 원형 40px */
.ms.lab-std .cp-pk .cp-pkb { min-height: 0; background: var(--surface2); }
.ms.lab-std .cp-pk .cp-pkb[aria-checked="true"] { background: color-mix(in srgb, var(--surface2) 80%, var(--text)); font-weight: 800; }
.ms.lab-std .cp-pk > .cp-nav { width: 40px; height: 40px; }
.ms.lab-std .cp-pk > .cp-nav { justify-self: end; }   /* ↺ 는 관성·힘과 가속도처럼 줄 끝에 */
.ms.lab-std .cp-pk > .cp-pkk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-gap-s); }   /* 진핵세포 종류(동물 | 식물): 선택 묶음 위의 한 줄 */
.ms.lab-std .cp-pk > .cp-pkk { margin-bottom: 8px; }   /* 진핵세포 종류 줄과 부위 묶음을 한 목록처럼 보이지 않게 구분(줄 사이 18px) */
@media (max-width: 480px) { .ms.lab-std .cp-nw { display: none; } }   /* 판의 경계: 좁은 폰에서는 단추의 '수렴' 글자를 줄임(낭독기 이름에는 있음) */
@media (max-width: 1023px) and (max-height: 700px) { .ms.lab-std:has(.cp-pkk) > .cp-side > .cp-act { position: static; order: 0; } }   /* 원핵·진핵: 조작이 두 묶음이라 낮은 화면에서는 하단 시트가 그림을 가리므로 일반 흐름으로 */
.ms.lab-std .cp-pk4 > .cp-nav { grid-column: -2 / -1; }   /* 선택 알약이 4개일 때도 ↺ 는 마지막 칸 끝에 */
@media (max-width: 1023px) and (max-height: 700px) { .ms.lab-std:has(.cp-pk4) > .cp-side > .cp-act { position: static; order: 0; } }
@media (max-width: 1023px) and (max-height: 700px) and (orientation: portrait) { .ms.lab-std:has(.cp-pk4) .ls-stage { width: 100%; } }   /* 작은 폰: 조작을 일반 흐름으로 두고 그림을 폭 가득히(읽기값이 이름표와 겹치지 않게) */