/* 과학 개념 — 정사각형 장면(화면 높이에 맞춰 잘리지 않는 가장 큰 크기) + 전체 스크립트(넓으면 오른쪽, 좁으면 아래). 색은 styles.css 토큰 */
.cp-block { margin-top: 18px; }
:root { --cp-gap: 14px; --cp-gap-s: 10px; }   /* 영상(.cp)과 체험(.lab-std)이 함께 쓰는 간격: 요소 사이 14px, 영상 보기→이전·다음 개념 카드 사이 10px */
.cp, .ms.lab-std { --cp-h: calc(100dvh - var(--hdr-h, 72px) - 100px); }   /* 그림 높이 = 화면 높이 − 상단바 − 아래 단추 줄. 체험(.lab-std)도 같은 변수로 카드 크기를 정한다 */
.cp { display: grid; gap: var(--cp-gap); }   /* 그림 높이 = 화면 높이 − 상단바 − 아래 단추 줄 */
.cp-stage { position: relative; width: min(100%, max(300px, var(--cp-h))); border-radius: 24px; overflow: hidden; background: #2a2a2f; }   /* 바탕색은 캔버스 판(다크 #2a2a2f)과 같게: 다르면 둥근 모서리의 안티앨리어싱 틈으로 가는 흰 테두리가 비친다 */
:root[data-theme="light"] .cp-stage { background: var(--cp-bg); }
.cp-stage canvas { display: block; width: 100%; aspect-ratio: 1 / 1; }
.cp-bar { display: flex; align-items: center; gap: var(--cp-gap); min-width: 0; width: min(100%, max(300px, var(--cp-h))); }
.cp-play { min-width: 112px; justify-content: center; display: inline-flex; align-items: center; gap: 7px; flex: none; }
.cp-dots { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.cp-dots i { flex: 1 1 0; max-width: 28px; height: 6px; border-radius: 999px; background: var(--surface2); transition: background-color .4s ease; }
.cp-dots i.on { background: var(--text); }
.cp-count { flex: none; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.cp-script-in p { display: flex; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; color: var(--muted); font-size: 1rem; line-height: 1.6; word-break: keep-all; transition: background-color .4s ease, color .4s ease; }
.cp-script-in p i { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); font-style: normal; font-size: .75rem; font-weight: 700; }
.cp-script-in p b { font-weight: 700; color: var(--text); }
.cp-script-in p.on { background: var(--surface); color: var(--text); }
.cp-script-in p.on i { background: var(--inv-bg); color: var(--inv-text); }
/* 넓은 화면: 왼쪽 그림, 오른쪽 스크립트(그림과 같은 높이, 길면 안에서 스크롤) */
@media (min-width: 900px) {
  .cp, .ms.lab-std { --cp-s: max(300px, min(var(--cp-h), calc(min(100vw, var(--maxw)) - 2 * var(--gutter) - 380px - 32px))); }
  .cp { grid-template-columns: var(--cp-s) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .cp-stage, .cp-bar { width: var(--cp-s); }
  .cp-script { grid-column: 2; grid-row: 1; position: relative; height: 100%; min-width: 0; }
  .cp-script-in { position: absolute; inset: 0; overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }
}
@media (max-width: 899px) { .cp-script { margin-top: 6px; } }
.cp-script-in p span { display: grid; gap: 4px; min-width: 0; }
.cp-script-in p strong { font-weight: 700; color: inherit; }
.cp-script-in p em { font-style: normal; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.cp-script-in p.on em { color: var(--text-secondary, var(--muted)); }

.cp-nav { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .cp-dots { display: none; } .cp-bar { justify-content: space-between; } }   /* 좁은 화면: 단추 3개가 들어가도록 진행 점은 숨기고 숫자만 */

/* 영역 카드 설명: 한 줄에 다 안 들어가면 줄을 바꿔 보여 줌(… 로 잘리지 않게) */
.tile p.cp-note { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; line-height: 1.55; }
.cards .tile .ls-n { color: var(--muted); font-size: .82rem; }   /* "관성"(만든 개념 이름)과 "작업 중" 글자 모양을 같게 */

/* 해설 음성: 그림 오른쪽 위 소리 켜기·끄기 단추(처음에는 소리 켜짐), 스크립트의 정답 설명 줄 */
.cp-mute { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--cp-ink, #26272e); background: rgba(255, 254, 251, .72); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); transition: none; }
.cp-mute:hover { background: rgba(255, 254, 251, .95); } .cp-mute.off { color: #8b8e99; }
:root:not([data-theme="light"]) .cp-mute { color: #ece8dc; background: rgba(58, 58, 65, .78); } :root:not([data-theme="light"]) .cp-mute:hover { background: rgba(72, 72, 80, .95); } :root:not([data-theme="light"]) .cp-mute.off { color: #8b8e99; }
.cp-script .cp-ans { display: inline-block; margin-top: 6px; color: var(--text); font-weight: 700; }
/* 영역의 개념 목록 화면 */
.cp-empty { margin: 0 0 18px; color: var(--muted); }
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cp-card { position: relative; display: grid; min-width: 0; border-radius: 20px; background: var(--surface); }   /* 눌러서 이동하는 카드 = 회색 둥근 상자 */
.cp-card-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 16px 56px 16px 18px; border: 0; border-radius: inherit; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cp-card-b:hover, .cp-card-b:focus-visible { background: var(--surface2); }
.cp-txt { display: grid; gap: 4px; min-width: 0; }
.cp-card b { font-size: 1.1rem; font-weight: 600; word-break: keep-all; }
.cp-card .cp-q { color: var(--muted); font-size: .9rem; line-height: 1.45; word-break: keep-all; }
.cp-card > .pin-btn { position: absolute; top: 14px; right: 14px; }
.cp-card > .pin-btn::after { content: ""; position: absolute; inset: -10px; }   /* 보이는 크기는 그대로, 누르는 자리는 44px */
.cp-more { margin-top: 22px; }
.cp-more summary { cursor: pointer; padding: 10px 0; color: var(--muted); font-size: .95rem; }
.cp-more summary small { font-size: .8rem; }
.cp-plan { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 2.2em; color: var(--muted); }
.cp-plan li { padding: 5px 0; font-variant-numeric: tabular-nums; }
.cp-plan b { margin-right: 10px; color: var(--text); font-weight: 500; word-break: keep-all; }
.cp-plan span { font-size: .88rem; word-break: keep-all; }
.ls-crumb .pin-btn { vertical-align: middle; }

.cp-card.soon { grid-template-columns: minmax(0, 1fr); align-items: center; padding: 16px 84px 16px 18px; opacity: .5; }   /* 아직 못 누르는 카드: 같은 모양을 흐리게 */
.cp-card.soon .cp-soon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .75rem; }
/* 정본 순서 목록(2026-11-01): 묶음 이름 */
.cp-grp { grid-column: 1 / -1; margin: 14px 0 0; font-size: .95rem; font-weight: 600; color: var(--muted); }
.cp-cards > .cp-grp:first-child { margin-top: 0; }

.cp-areaw { position: relative; display: grid; min-width: 0; }
.cp-areaw > .tile { height: 100%; }
.cp-areaw > .tile h3 { padding-right: 36px; }
.cp-areaw > .pin-btn { position: absolute; top: 14px; right: 14px; }
.cp-areaw > .pin-btn::after { content: ""; position: absolute; inset: -10px; }

.cp-segrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }   /* 과목 탭 줄 오른쪽 끝에 지금 과목의 별 하나 */
.cp-segrow > .pin-btn { position: relative; flex: none; margin-right: 14px; }   /* 아래 영역 카드의 별과 같은 크기·같은 세로줄(카드 오른쪽 14px 안쪽) */
.cp-segrow > .pin-btn::after { content: ""; position: absolute; inset: -10px; }
.cp-segrow { flex-wrap: nowrap; }   /* 별이 탭 줄 아래로 떨어지지 않게: 탭이 모자라면 탭 줄 안에서 가로로 밀림 */
.cp-segrow > .fgroup { min-width: 0; flex: 0 1 auto; max-width: calc(100% - 45px); }
.cp-segrow .seg-ctl { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cp-segrow .seg-ctl::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .cp-segrow .seg-ctl-b { padding-inline: 11px; } }

.page-h h2 .h-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .2s ease; }   /* 서비스 제목: 눌러서 그 서비스 첫 화면으로 */
.page-h h2 .h-link:hover, .page-h h2 .h-link:focus-visible { color: var(--muted); }

/* 스크립트는 기본으로 접어 둠(그림 아래 단추로 펼침). 접혀 있으면 그림만 가운데에 */
.cp:not(.sc) .cp-script { display: none; }
.cp-scb { color: var(--muted); border-color: transparent; background: none; }
.cp-scb[aria-expanded="true"] { color: var(--text); background: var(--surface2); }
@media (min-width: 900px) { .cp:not(.sc) { grid-template-columns: var(--cp-s); justify-content: center; } }
/* 이전·다음 개념: 문서 아래의 '이전/다음' 처럼 조용한 두 칸. 눌러서 이동하는 것이라 회색 둥근 상자 */
.cp-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cp-gap-s); width: min(100%, max(300px, var(--cp-h))); }
@media (min-width: 900px) { .cp-pn { grid-column: 1; width: var(--cp-s); } }
.cp-pn-b { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border: 0; border-radius: 20px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .25s ease; }
.cp-pn-b:hover, .cp-pn-b:focus-visible { background: var(--surface2); }
.cp-pn-b.next { justify-content: flex-end; text-align: right; grid-column: 2; }
.cp-pn-b.soon { opacity: .6; cursor: default; } .cp-pn-b.soon:hover { background: var(--surface); }
.cp-pn-b svg { flex: none; color: var(--muted); }
.cp-pn-t { display: grid; gap: 2px; min-width: 0; }
.cp-pn-t small { color: var(--muted); font-size: .78rem; }
.cp-pn-t b { font-size: .95rem; font-weight: 600; line-height: 1.35; word-break: keep-all; }

/* '직접 해 보기' 단추(짝 시뮬레이션이 있는 개념만): 위 한 줄에 단추만, 아래 한 줄에 이전 개념 · 다음 개념(두 줄 배치) */
.cp-pn.has-sim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.cp-sim { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; min-height: 44px; }
.cp-pn.has-sim .cp-pn-b.next { grid-column: 2; }

/* 재생·'직접 해 보기' 단추를 이전·다음 장면 단추와 같은 색으로 통일: 밝은 모드는 연한 회색, 어두운 모드는 어두운 회색(색 토큰 --surface2 와 글자 --text 가 테마에 맞게 바뀐다) */
.btn.primary.cp-play, .btn.primary.cp-sim { background: var(--surface2); color: var(--text); }