/* Lab Shell 껍데기 (v2 — 2026-08-11 전면 개정)
 *
 * 실습은 이야기 한가운데에 놓인다. 그러니 **본문과 확실히 달라 보여야** 한다 —
 * 여기부터는 읽는 곳이 아니라 만지는 곳이라는 게 색과 빛으로 먼저 전달돼야 한다.
 *
 * 그래서 실습판은 밝게/어둡게와 상관없이 **언제나 어두운 무대**다.
 * 종이 테마에서 읽는 아이도 실습만은 같은 무대를 본다. (--stage-* 토큰)
 */

.lab {
  /* 무대 전용 색 — 테마와 무관하게 고정한다 */
  --stage:      #0d1024;
  --stage-2:    #171c3c;
  --stage-3:    #212850;
  --stage-line: #2f3768;
  --stage-ink:  #eef1ff;
  --stage-soft: #a3abd8;
  --stage-faint:#7d86bd;   /* 작은 글자에 많이 쓰인다. 대비 여유를 둔다 */

  position: relative;
  margin-block: var(--s6);
  border-radius: var(--radius);
  background: var(--stage);
  color: var(--stage-ink);
  font-family: var(--font);
  overflow: hidden;
  line-height: 1.6;                    /* 본문(1.85)은 읽기용이다. 조작판은 촘촘해야 한다 */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/**
 * 본문 조판을 여기서 끊는다.
 * 실습이 이야기 한가운데에 놓이면서 `.chapter h3` 같은 규칙이 실습 안까지
 * 흘러 들어온다. 실제로 `.chapter h3` 의 위쪽 여백 48px 이 실습 제목을
 * 아래로 밀어내 머리글이 세 줄로 무너졌다. (2026-08-11)
 * `.lab-title { margin: 0 }` 은 특정도가 낮아 졌다 — 여기서 같은 특정도로 이긴다.
 */
.lab h3, .lab h4, .lab p, .lab ul, .lab ol, .lab li { margin: 0; }
.lab h3, .lab h4 { font-size: inherit; border: 0; padding: 0; }
.lab strong { background: none; }
.lab code {
  background: rgba(255, 255, 255, .08); color: var(--c-cyan);
  padding: .1em .4em; border-radius: 5px;
}
/* 테두리를 그라데이션으로. border 로는 안 되므로 덧칠한다 */
.lab::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,165,61,.55), rgba(157,92,255,.35) 42%, rgba(46,230,214,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── 머리 ─────────────────────────────────────── */
.lab-head {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-block-end: 1px solid var(--stage-line);
}
.lab-title {
  margin: 0; font-size: 1.125rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.lab-title::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--c-cyan); box-shadow: 0 0 14px var(--c-cyan);
}
.lab-tools { margin-inline-start: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

.lab-badge {
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* 의미 고정: 옛날 = 호박색, 지금 = 청록. 12개 실습에서 반복되므로 뒤집지 않는다 */
.lab-badge--oldAI   { background: rgba(255,165,61,.16); color: #ffc078;
                      border: 1px solid rgba(255,165,61,.4); }
.lab-badge--archive { background: rgba(255,255,255,.06); color: var(--stage-soft);
                      border: 1px solid var(--stage-line); }

/* 본문 안에서 실습을 가리키는 딱지 */
.lab-chip {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #150a18; background: var(--grad);
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lab-chip b { font-weight: 800; }

/* ── 몸 ───────────────────────────────────────── */
.lab-body { padding: var(--s5); }
.lab-stage { min-height: 4rem; }

/* 대비 실습 2단 — 좁으면 세로로 쌓인다 */
.lab-panels {
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
  margin-block-start: var(--s4);
}
@media (min-width: 44rem) { .lab-panels { grid-template-columns: 1fr 1fr; } }
.lab-panel {
  border: 1px solid var(--stage-line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  padding: var(--s4);
  min-width: 0;                 /* 영어가 길어져도 넘치지 않게 */
}
.lab-panel h4 { margin: 0 0 var(--s3); font-size: .875rem; font-weight: 800;
                letter-spacing: .06em; text-transform: uppercase; }
.lab-panel--past { border-color: rgba(255,165,61,.45); }
.lab-panel--past h4 { color: #ffc078; }
.lab-panel--now  { border-color: rgba(46,230,214,.45); }
.lab-panel--now h4 { color: var(--c-cyan); }

/* ── 발 · 단계 안내 ────────────────────────────── */
.lab-foot {
  display: flex; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s5);
  border-block-start: 1px solid var(--stage-line);
  background: rgba(0, 0, 0, .28);
}
.lab-step { flex: 1 1 20rem; min-width: 0; }
.lab-step-num {
  display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  color: var(--stage-faint);
}
.lab-step-text {
  margin: var(--s2) 0 0; font-size: 1.0625rem; line-height: 1.65; font-weight: 600;
  word-break: keep-all;         /* 한국어 낱말 중간에서 줄바꿈 금지 */
}
.lab-step-help { display: flex; gap: var(--s2); margin-block-start: var(--s3); }
/* `.lab .` 로 적는 이유 — 위의 조판 초기화가 `.lab p` 로 여백을 0 으로 만드는데,
   이 둘은 `<p>` 다. `.lab-answer`(0,1,0)는 `.lab p`(0,1,1)를 못 이긴다.
   그래서 여백이 아예 먹지 않아 답이 단추에 붙어 나왔다. (2026-08-12) */
.lab .lab-hint, .lab .lab-answer {
  /* 단추 바로 밑에 붙으면 단추의 일부처럼 보인다. 열렸다는 게 보여야 한다 */
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm); font-size: .9375rem;
  word-break: keep-all; color: var(--stage-ink);
}
.lab-hint { background: rgba(77,155,255,.14); border: 1px solid rgba(77,155,255,.3); }
/* 답은 힌트와 눈에 띄게 달라야 한다 — 아이가 둘을 같은 것으로 보면 답을 안 누른다 */
.lab-answer {
  background: rgba(46,230,214,.12);
  border: 1px solid rgba(46,230,214,.45);
  border-inline-start-width: 4px;
}
/* 복원 알림 — 단추가 아니라 한 줄이다. 다음 단계로 넘어가면 사라진다 */
.lab-resume { flex: 1 0 100%; margin: 0 0 var(--s2);
              font-size: .8125rem; color: var(--stage-faint); }
.lab-nav { display: flex; gap: var(--s2); margin-inline-start: auto; }

/* ── 단추 ─────────────────────────────────────── */
.lab-btn {
  font: inherit; font-size: .9375rem; font-weight: 700;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--stage-line);
  border-radius: var(--radius-pill);
  background: var(--stage-2); color: var(--stage-ink);
  cursor: pointer;
  min-height: 2.75rem;          /* 터치 목표 최소 크기 */
  transition: transform .08s ease, filter .15s ease, border-color .15s ease;
}
.lab-btn:hover:not(:disabled) { border-color: var(--c-cyan); filter: brightness(1.15); }
.lab-btn:active:not(:disabled) { transform: translateY(1px); }
.lab-btn:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 3px; }
.lab-btn:disabled { opacity: .35; cursor: default; }
.lab-btn--primary {
  background: var(--grad); border-color: transparent; color: #170a1b;
  box-shadow: 0 6px 20px rgba(255, 77, 141, .28);
}
.lab-btn--ghost { background: transparent; color: var(--stage-soft); }

/* ── 무대 부품 (v2) ──────────────────────────────
 * 실습마다 판·계기·손잡이를 새로 그리면 33벌이 서로 조금씩 달라진다.
 * 여기서 한 벌만 정하고 실습은 골라 쓴다.
 *
 *   .lab-screen   깊은 화면 — 그림·캔버스가 사는 곳 (모눈 배경)
 *   .lab-card     조작반의 판
 *   .lab-hd       판의 작은 제목
 *   .lab-meter    가로 막대 계기
 *   .lab-num      큰 숫자
 *   .lab-row      계기 한 줄 (막대 + 숫자)
 */
.lab-screen {
  position: relative; overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stage-line);
  background:
    radial-gradient(70% 120% at 50% -10%, rgba(157, 92, 255, .18), transparent 65%),
    #05060f;
  padding: var(--s3);
}
.lab-screen::before {                       /* 모눈 — 계측기 느낌 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
}
.lab-screen > * { position: relative; }

.lab-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--stage-line);
  border-radius: var(--radius-sm);
  padding: var(--s4);
  min-width: 0;
}
.lab-hd {
  /* 이름표가 아래 내용에 붙어 보인다는 검수(2026-08-13). 12px → 16px */
  margin: 0 0 var(--s4); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stage-faint);
}

.lab-row { display: flex; align-items: center; gap: var(--s4); }
.lab-meter {
  flex: 1; height: 1.1rem; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .45); overflow: hidden;
  border: 1px solid var(--stage-line);
}
.lab-meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #ff4d8d, #ffa53d);
  box-shadow: 0 0 16px rgba(255, 77, 141, .55);
  transition: width .12s ease-out;
}
.lab-meter--good i {
  background: linear-gradient(90deg, #2ee6d6, #4d9bff);
  box-shadow: 0 0 16px rgba(46, 230, 214, .55);
}
.lab-num {
  font-size: 2.25rem; line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; min-width: 2.6ch; text-align: end;
  color: #ff7d9f;
}
.lab-num--good { color: var(--c-cyan); text-shadow: 0 0 20px rgba(46, 230, 214, .8); }

/* 손잡이 — 기본 슬라이더는 작고 밋밋하다. 손으로 잡는 것이라 크게 만든다.
   실습별로 다시 정의하지 않는다. 여기 하나가 전부의 손잡이다. */
.lab input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2.75rem; background: none; cursor: grab; margin: 0;
}
.lab input[type="range"]:active { cursor: grabbing; }
.lab input[type="range"]::-webkit-slider-runnable-track {
  height: .75rem; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(46,230,214,.55), rgba(157,92,255,.5));
  border: 1px solid var(--stage-line);
}
.lab input[type="range"]::-moz-range-track {
  height: .75rem; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(46,230,214,.55), rgba(157,92,255,.5));
  border: 1px solid var(--stage-line);
}
.lab input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.1rem; height: 2.1rem; margin-block-start: -.7rem;
  border-radius: 50%; border: 3px solid #0d1024;
  background: radial-gradient(circle at 34% 30%, #ffffff, #2ee6d6 58%, #14b3a6);
  box-shadow: 0 0 20px rgba(46, 230, 214, .75);
}
.lab input[type="range"]::-moz-range-thumb {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 3px solid #0d1024;
  background: radial-gradient(circle at 34% 30%, #ffffff, #2ee6d6 58%, #14b3a6);
  box-shadow: 0 0 20px rgba(46, 230, 214, .75);
}
.lab input[type="range"]:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; }

/* 값 표시 — 손잡이 옆의 숫자 */
.lab output {
  font-size: 1.5rem; line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--c-cyan);
}

/* 글자 · 체크 */
.lab-note { margin: var(--s3) 0 0; font-size: .8125rem; color: var(--stage-faint); }
/* 계산에만 쓰는 영상. `display:none` 이면 재생이 멈추므로 보이지 않게만 둔다 */
.lab-offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* `display` 를 주는 부품은 [hidden] 을 이긴다. 감추라고 했으면 감춰져야 한다 */
.lab [hidden] { display: none !important; }
.lab-check {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .875rem; color: var(--stage-soft); cursor: pointer;
}
.lab-check input { accent-color: var(--c-cyan); width: 1.05rem; height: 1.05rem; }

/* ── 대체 모드 · 개인정보 고지 ──────────────────── */
.lab-fallback {
  padding: var(--s5); text-align: center;
  border: 1px dashed var(--stage-line);
  border-radius: var(--radius-sm);
}
.lab-fallback p { margin: 0 0 var(--s3); color: var(--stage-soft); word-break: keep-all; }
.lab-privacy { margin: var(--s3) 0 0; font-size: .8125rem; color: var(--stage-faint);
               word-break: keep-all; }

/* ── 책에는 실습이 안 들어간다 ──────────────────── */
@media print { .lab-foot, .lab-tools { display: none; } }

/* ── 도장과 점수 ────────────────────────────────
   게임 장치는 껍데기가 갖는다. 실습마다 붙이면 33번 어긋난다.        */
.lab-scoreboard {
  font-variant-numeric: tabular-nums; font-size: .9375rem; font-weight: 800;
  color: var(--c-cyan); white-space: nowrap;
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
  background: rgba(46,230,214,.12);
}
.lab-goalbar { display: flex; align-items: center; gap: var(--s2); }
/* 점만 두면 단계 표시로 읽힌다. 이름을 붙여 둔다 */
.lab-goal-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  color: var(--stage-faint); white-space: nowrap;
}
.lab-goal-dots { display: flex; gap: 5px; }
.lab-goal-dot {
  width: .85rem; height: .85rem; border-radius: 50%;
  border: 2px solid var(--stage-line); background: none;
  transition: box-shadow .25s ease, background .25s ease;
}
.lab-goal-dot.is-on {
  background: var(--grad); border-color: transparent;
  box-shadow: 0 0 14px rgba(255, 77, 141, .75);
}
.lab-goal-count { font-size: .75rem; color: var(--stage-faint);
                  font-variant-numeric: tabular-nums; font-weight: 700; }

/* 도장을 받은 순간. 눈에 띄되 화면을 가리지 않는다 */
.lab-toast {
  position: absolute; inset-inline-end: var(--s5); inset-block-start: 4rem;
  z-index: 5;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); border-radius: var(--radius-pill);
  background: var(--grad); color: #170a1b; font-weight: 800; font-size: 1rem;
  box-shadow: 0 10px 30px rgba(255, 77, 141, .45);
  animation: lab-pop .32s cubic-bezier(.2, 1.6, .4, 1);
}
/* 똘뱅이가 만세를 부른다. 알약 위로 살짝 올라타야 알림이 아니라 **반응**으로 읽힌다 */
.lab-toast-ddol {
  width: 2.75rem; height: 2.75rem;
  margin-block: -1rem -.65rem; margin-inline-start: calc(var(--s2) * -1);
  animation: ddol-hop .5s cubic-bezier(.2, 1.5, .4, 1) .1s 2;
}
@keyframes lab-pop {
  from { transform: translateY(-.6rem) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes ddol-hop {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-.3rem) rotate(-6deg); }
}
/* 이 실습에서 유일하게 움직이는 장식이다. 끄겠다고 한 사람에겐 끈다 */
@media (prefers-reduced-motion: reduce) {
  .lab-toast, .lab-toast-ddol { animation: none; }
}

/* 실습 문구 안의 화면 이름표 — `자동으로 맞춰보기` 처럼 단추 이름을 감싼 것.
   역따옴표를 그대로 보여주고 있던 걸 고치면서 생겼다 */
.lab-key {
  font: inherit; font-size: .9375em; font-weight: 700;
  padding: .05em .35em; border-radius: 6px;
  color: var(--stage-ink); background: rgba(255,255,255,.10);
  border: 1px solid var(--stage-line); white-space: nowrap;
}