/* Lab Shell 의 옷.
 *
 * 실습마다 판·단추·카드를 따로 그리면 열세 벌이 조금씩 어긋납니다.
 * 여기 한 벌만 둡니다. 실습은 자기 화면만 그립니다.
 *
 * **무대는 밝습니다.** Teens 는 실습만 어두운 무대로 두었지만, 우리는
 * 캐릭터가 화면의 주인공이라 밝은 쪽이 맞습니다 (tokens.css 머리 참조).
 */

/* ── 실습 상자 ─────────────────────────────────────── */
.lab {
  position: relative;
  margin: var(--s6) 0;
  padding: var(--s4);
  background: var(--cream-2);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--drop-2);
  /* 본문 조판이 실습 안으로 흘러들지 않게 끊습니다.
     Teens 에서 `.chapter h3` 의 여백이 실습 머리글을 무너뜨린 적이 있습니다 */
  font-size: var(--text);
  line-height: 1.6;
}
/* **클래스를 가진 문단은 건드리지 않습니다.**
 *
 * `.lab p { margin: 0 }` 은 특정도가 (0,1,1) 이라 `.lab-answer`·`.c6-say`·
 * `.c8-why` 같은 (0,1,0) 규칙을 전부 이깁니다. 그래서 실습 안의 모든 안내
 * 문단이 **자기 여백을 잃고 위에 붙어** 있었습니다 — ch-4·6·7 에서 답이
 * 질문에 붙어 보인 것이 전부 이 한 줄 때문이었습니다 (집필자 확인 2026-08-17).
 *
 * 본문 조판을 끊으려던 것이었으니, 이름 없는 문단만 끊으면 됩니다. */
.lab p:not([class]) { margin: 0; }

.lab-head { display: flex; justify-content: flex-end; margin-bottom: var(--s3); }
.lab-tools { display: flex; gap: var(--s2); }


.lab-stage { background: transparent; }

/* **`[hidden]` 이 무엇보다 세야 합니다.**
 *
 * `.lab-btn--big` 이 `display: block` 을 주는 바람에 브라우저의
 * `[hidden] { display: none }` 을 덮어썼습니다. 실습이 `auto.hidden = true` 로
 * 감춘 단추가 **그대로 보였고**, 아이는 눌러도 아무 일이 없는 단추를 계속
 * 눌렀습니다 (집필자 확인 2026-08-18). 같은 사고가 뜻 상자에서 한 번 있었고
 * (`design/site.css` 참조) 여기서 두 번째입니다.
 *
 * 실습 일곱이 `hidden` 으로 무언가를 감춥니다. 한 줄로 전부 막습니다. */
[hidden] { display: none !important; }

/* ── 단추 ─────────────────────────────────────────── */
.lab-btn {
  font: inherit; font-weight: 800; color: var(--ink);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--drop-1);
  padding: var(--s2) var(--s4);
  cursor: pointer;
}
.lab-btn:active { transform: translateY(3px); box-shadow: none; }
/* 보조 단추라도 **40px 아래로 내려가지 않습니다.** 초 3~4 의 손가락이 누릅니다.
   본문 속 `.term` 은 예외입니다 — 글줄 안에 있어서 키우면 줄이 깨집니다 */
.lab-btn--ghost {
  font-size: .85rem; padding: 5px var(--s3); min-height: 40px;
  box-shadow: none; border-width: 2px;
}
.lab-btn--primary { background: var(--leaf); }
/* 아이가 누르는 큰 단추 — 똘뱅이 가족 공용 규격 (대비 3.58:1 측정본) */
.lab-btn--big {
  display: block; width: 100%; max-width: 420px; margin: var(--s4) auto 0;
  background: var(--leaf); border-radius: var(--radius);
  box-shadow: var(--drop-3); font-size: 21px; padding: 16px 32px;
}

/* ── 발 — 단계 안내 ──────────────────────────────────
 * **두 줄로 못박습니다.** flex 한 줄에 글과 단추를 같이 두었더니 글이 길어질
 * 때마다 단추가 밀려 내려가 조판이 무너졌습니다 (집필자 확인 2026-08-17).
 * 위는 글, 아래는 조작 — 글 길이가 바뀌어도 자리가 안 흔들립니다. */
.lab-foot {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 2px solid var(--line);
  display: grid; gap: var(--s3);
}
.lab-step-text { font-weight: 700; margin: 0; }
/* 답 — **질문에 붙지 않게, 그리고 글머리가 맞게.**
 *
 * 위 여백이 8px 이라 답이 질문의 다음 줄처럼 읽혔고, 상자 안쪽 여백 때문에
 * 답의 첫 글자가 질문보다 오른쪽으로 밀려 있었습니다 (집필자 확인 2026-08-17).
 *
 * 여백을 벌리고, 왼쪽 여백만큼 상자를 밖으로 빼서 **글머리를 질문과 맞춥니다.**
 * 초록 세로선이 "여기부터 답" 을 말합니다. */
.lab-answer {
  margin: var(--s4) 0 0 calc(var(--s4) * -1 - 6px);
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 2px solid var(--line);
  border-left: 6px solid var(--leaf);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .95rem; font-weight: 400; color: var(--ink-2);
}
.lab-nav {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; justify-content: flex-end;
}
.lab-pips { display: flex; gap: 4px; margin-right: auto; }
.lab-pip { width: 22px; height: 6px; border-radius: 3px; background: var(--cream-3); }
.lab-pip.is-on { background: var(--ink-3); }
.lab-btn:disabled { opacity: .38; cursor: default; transform: none; box-shadow: none; }
.lab-key {
  font: inherit; font-weight: 800;
  background: var(--yellow); border-radius: 5px; padding: 0 .25em;
}

/* ── 카드 고르개 ─────────────────────────────────────
 * `min-width: 0` 이 없으면 격자 칸이 **내용 너비만큼 벌어져** 아래의
 * `overflow-x` 가 일을 못 합니다. 카드 여섯 장이 실습 상자 밖으로
 * 삐져나가고 있었습니다 (집필자 확인 2026-08-17). */
.cards { display: grid; gap: var(--s3); margin-top: var(--s4); min-width: 0; }
.card-slot { min-width: 0; }
.card-slot-label {
  margin: 0 0 var(--s2); font-size: .85rem; font-weight: 800;
  color: var(--ink-3); letter-spacing: .03em;
}
.card-row {
  display: flex; gap: var(--s2);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 2px var(--s2);
  scrollbar-width: thin;
  /* 손가락으로 밀 때 카드가 자리를 잡게 */
  scroll-snap-type: x proximity;
}
.card-row > .card { scroll-snap-align: start; }
.card {
  flex: 0 0 auto; width: 82px; padding: 5px 5px 7px;
  background: var(--paper); color: var(--ink); font: inherit;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--drop-1); cursor: pointer; text-align: center;
}
.card:active { transform: translateY(3px); box-shadow: none; }
.card.is-on { background: var(--yellow); }
.card-pic {
  margin: 0; height: 54px; border-radius: 10px;
  overflow: hidden; background: var(--cream-2);
}
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card b { display: block; font-size: .78rem; margin-top: 4px; font-weight: 800; }

/* ── 캐릭터 반응 — 움직이는 것은 여기 하나뿐입니다 ──── */
.lab-toast {
  position: absolute; right: var(--s4); bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--drop-2);
  font-weight: 800;
  animation: toast-in .3s ease, toast-hop .5s ease .3s 2;
}
.lab-toast-cut { width: 52px; height: 52px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-hop { 50% { transform: translateY(-7px); } }

.lab-broken, .lab-noscript {
  padding: var(--s4); background: var(--paper);
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2);
}

/* 잠긴 단추 — **눌러도 되는 것과 확실히 달라 보여야** 합니다.
   6번의 `AI가 알아서 이어 줘` 가 끝난 뒤 이 모습으로 남습니다 */
.lab-btn:disabled {
  cursor: default; opacity: .55;
  box-shadow: none; transform: translateY(3px);
}