/* 화면 실험실 — 표현 원리 감각 테스트 (WIP) */

.lab-root {
  --lab-bg: #08090d;
  --lab-fg: #dfe4ee;
  --lab-dim: #7e8798;
  --lab-line: #232838;
  --lab-acc: #22d3ee;
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--pium-header-h, 52px) - var(--pium-footer-h, 44px));
  background: var(--lab-bg);
  color: var(--lab-fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  overflow: hidden;
}

/* ── 메뉴 ── */
.lab-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 22px;
}
.lab-lede {
  margin: 2px 2px 14px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--lab-dim);
}
.lab-lede b { color: var(--lab-fg); font-weight: 600; }
.lab-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--lab-line);
  border-radius: 12px;
  background: #0e1017;
  color: inherit;
  padding: 12px 13px;
  margin-bottom: 9px;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lab-item:active { background: #141826; }
.lab-item-h { display: flex; align-items: baseline; gap: 8px; }
.lab-num {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--lab-acc);
  letter-spacing: .06em;
  flex: none;
}
.lab-item-n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lab-item-s { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: var(--lab-dim); }

/* ── 스테이지 ── */
.lab-stage { flex: 1; min-height: 0; display: none; flex-direction: column; }
.lab-root.is-stage .lab-menu { display: none; }
.lab-root.is-stage .lab-stage { display: flex; }

.lab-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--lab-line);
}
.lab-back, .lab-pause {
  border: 1px solid var(--lab-line);
  background: #12151f;
  color: var(--lab-fg);
  border-radius: 8px;
  padding: 6px 11px;
  font: 600 12px/1.2 inherit;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.lab-pause.is-on { background: var(--lab-acc); border-color: var(--lab-acc); color: #06202a; }
.lab-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }

.lab-view { flex: 1; min-height: 30%; position: relative; overflow: hidden; background: #000; touch-action: none; }

/* 안내문 + 컨트롤은 한 덩어리로 묶어 자체 스크롤 — 화면이 짧아도
   마지막 줄이 푸터 아래로 잘려 손이 닿지 않는 일이 없게 한다. */
.lab-panel {
  flex: none;
  max-height: 54%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lab-view canvas { position: absolute; inset: 0; display: block; }

.lab-note {
  flex: none;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--lab-dim);
  border-top: 1px solid var(--lab-line);
}
.lab-note b { color: var(--lab-acc); font-weight: 600; }

.lab-ctl {
  flex: none;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lab-row { display: flex; align-items: center; gap: 9px; }
.lab-lb { flex: none; width: 82px; font-size: 11px; color: var(--lab-dim); }
.lab-val { flex: none; width: 46px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--lab-fg); }
.lab-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--lab-acc); height: 22px; }
.lab-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.lab-btn {
  border: 1px solid var(--lab-line);
  background: #12151f;
  color: var(--lab-fg);
  border-radius: 8px;
  padding: 7px 12px;
  font: 600 12px/1.2 inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lab-btn.is-on { background: var(--lab-acc); border-color: var(--lab-acc); color: #06202a; }

@media (min-width: 760px) {
  .lab-menu { max-width: 720px; margin: 0 auto; padding-top: 20px; }
  .lab-ctl { max-width: 720px; margin: 0 auto; width: 100%; }
  .lab-note { max-width: 720px; margin: 0 auto; width: 100%; }
  .lab-panel { max-height: 46%; }
}