/* AI 랩 공통 스타일 — 판(lab/<slug>.html)과 목록(lab/index.html)이 함께 쓴다
 *
 * 무대(.lab-stage)는 3:4 한 장이다. 사이트에서는 화면 폭에 맞춰 줄고, ?reel=1 이면 무대만 남아
 * 창을 채운다(릴스 1080×1440 = 540×720 창 × 배율 2). 무대 안 글자는 cqw 단위라 크기와 무관하게
 * 같은 구도로 보인다 — 사이트 화면이 곧 릴스 화면이다.
 *
 * 다크 배경 규칙(CLAUDE.md): 본문 #94a3b8 이상, 보조 #64748b 이상, 테두리 rgba(255,255,255,.10) 이상.
 */
:root {
  --bg: #070b16;
  --panel: #0e1526;
  --line: rgba(255,255,255,0.12);
  --tx: #e2e8f0;
  --tx2: #94a3b8;
  --tx3: #64748b;
  --a: #38bdf8;      /* 클래스 0 · 하늘 */
  --b: #fb923c;      /* 클래스 1 · 주황 */
  --ok: #34d399;
  --brand: #a78bfa;
}
* { margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; }
html, body { background: var(--bg); color: var(--tx); }
body {
  font-family: 'Pretendard', 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  min-height: 100vh;
}
a { color: inherit; }
.nb { white-space: nowrap; }

/* ── 페이지 틀 ─────────────────────────────────────────────── */
.lab-top {
  max-width: 1180px; margin: 0 auto; padding: 18px 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--tx2);
}
.lab-top a { text-decoration: none; }
.lab-top a:hover { color: var(--tx); }
.lab-top .brand { font-weight: 800; color: var(--tx); letter-spacing: -0.01em; }
.lab-top .brand b { color: var(--brand); }

.lab-main {
  max-width: 1180px; margin: 0 auto; padding: 18px 16px 56px;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: start;
}
@media (max-width: 900px) {
  .lab-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lab-stage-wrap { max-width: 560px; margin: 0 auto; width: 100%; }
}

/* ── 무대 (3:4) ────────────────────────────────────────────── */
/* cqw 의 기준은 래퍼다 — 무대 자신에 container-type 을 걸면 무대의 padding 이 뷰포트 기준이 된다 */
.lab-stage-wrap { position: relative; container-type: inline-size; }
.lab-stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% 40%, #14203c 0%, #0a1122 60%, #070b16 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 5cqw 5cqw 4cqw;
}
.st-eb { font-size: 2.6cqw; font-weight: 800; letter-spacing: 0.16em; color: var(--brand); }
.st-title { margin-top: 1.2cqw; font-size: 6.2cqw; font-weight: 800; line-height: 1.2; text-align: center; letter-spacing: -0.02em; }
.st-cap {
  margin-top: 1.6cqw; min-height: 8.4cqw; max-width: 88cqw;
  font-size: 3.3cqw; line-height: 1.35; text-align: center; color: var(--tx2);
  transition: opacity .35s ease;
}
.st-cap b { color: var(--tx); }
.st-plot { margin-top: 2cqw; width: 80cqw; height: 80cqw; position: relative; }
.st-plot canvas { width: 100%; height: 100%; display: block; border-radius: 2.4cqw; }
.st-stats {
  margin-top: 3cqw; width: 80cqw;
  display: grid; grid-template-columns: 1.6fr 1fr 0.8fr; gap: 2cqw; align-items: end;
}
.st-stat .k { font-size: 2.4cqw; color: var(--tx2); letter-spacing: 0.04em; }
.st-stat .v { font-size: 4.2cqw; font-weight: 800; margin-top: 0.6cqw; font-variant-numeric: tabular-nums; }
.st-stat .v.big { font-size: 7.4cqw; line-height: 1; }
.st-stat .v.ok { color: var(--ok); }
.st-mode {
  display: inline-block; margin-top: 0.8cqw; padding: 0.8cqw 2cqw; border-radius: 99px;
  font-size: 2.7cqw; font-weight: 700; white-space: nowrap; border: 1px solid var(--line); background: rgba(255,255,255,0.08);
}
.st-mode.net { color: var(--ok); border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.12); }
.st-wm {
  position: absolute; left: 0; right: 0; bottom: 2.6cqw; text-align: center;
  font-size: 2.7cqw; font-weight: 700; color: var(--tx2); letter-spacing: 0.02em;
}
.st-wm b { color: var(--brand); }

/* 잠금 — 회원 판. 첫 장면 위에 덮는다 */
.lab-lock {
  position: absolute; inset: 0; z-index: 5; display: none;
  align-items: center; justify-content: center; padding: 8cqw;
  background: rgba(7,11,22,0.72); backdrop-filter: blur(3px);
}
.lab-lock.on { display: flex; }
.lab-lock .card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 22px; max-width: 360px; text-align: center;
}
.lab-lock .card h3 { font-size: 19px; margin-bottom: 8px; }
.lab-lock .card p { font-size: 14.5px; line-height: 1.6; color: var(--tx2); text-align: left; }
.lab-lock .card a {
  display: inline-block; margin-top: 16px; padding: 11px 22px; border-radius: 12px;
  background: var(--brand); color: #140a2e; font-weight: 800; text-decoration: none;
}

/* ── 조작 패널 ─────────────────────────────────────────────── */
.lab-side h1 { font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; }
.lab-side .lead { margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: var(--tx2); }
.lab-side .lead b { color: var(--tx); }
.lab-ctl { margin-top: 20px; display: grid; gap: 14px; }
.lab-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lab-row .lbl { width: 100%; font-size: 13px; color: var(--tx2); font-weight: 700; letter-spacing: 0.02em; }
.btn {
  appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,0.08); color: var(--tx);
  font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 16px; border-radius: 11px; cursor: pointer;
  min-height: 44px;
}
.btn:hover { border-color: rgba(255,255,255,0.28); }
.btn.primary { background: var(--brand); color: #140a2e; border-color: transparent; }
.btn.on { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.55); color: var(--ok); }
.btn:disabled { opacity: 1; color: var(--tx3); cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.seg button {
  appearance: none; border: 0; background: transparent; color: var(--tx2); font: inherit; font-size: 14px;
  font-weight: 700; padding: 10px 14px; cursor: pointer; min-height: 44px;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: rgba(167,139,250,0.18); color: var(--tx); }
.lab-ctl.locked { pointer-events: none; }
.lab-ctl.locked .btn, .lab-ctl.locked .seg button { color: var(--tx3); }

/* 설명 · 이어 볼 글 */
.lab-note {
  margin-top: 26px; padding: 18px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  font-size: 14.5px; line-height: 1.75; color: var(--tx2);
}
.lab-note h2 { font-size: 16px; color: var(--tx); margin-bottom: 8px; }
.lab-note p + p { margin-top: 8px; }
.lab-note b { color: var(--tx); }
.lab-next { margin-top: 18px; display: grid; gap: 10px; }
.lab-next h2 { font-size: 16px; }
.lab-next a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(167,139,250,0.4); background: rgba(167,139,250,0.10);
  font-weight: 700; font-size: 15px;
}
.lab-next a:hover { background: rgba(167,139,250,0.18); }
.lab-next .tag { flex: none; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,0.10); color: var(--tx2); }
.lab-next .tag.free { background: rgba(52,211,153,0.16); color: var(--ok); }
.lab-foot { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; font-size: 13px; color: var(--tx3); }
.lab-foot a { color: var(--tx2); }

/* ── 릴스 모드: 무대만 남긴다 ──────────────────────────────── */
html.reel, html.reel body { overflow: hidden; }
html.reel .lab-top, html.reel .lab-side, html.reel .lab-foot, html.reel #gw-share-btn { display: none !important; }
html.reel .lab-main { display: block; max-width: none; padding: 0; }
html.reel .lab-stage-wrap { max-width: none; width: min(100vw, 75vh); margin: 0 auto; }
html.reel .lab-stage { border: 0; border-radius: 0; }

/* ── 목록 페이지 ──────────────────────────────────────────── */
.lab-hero { max-width: 1180px; margin: 0 auto; padding: 28px 16px 8px; }
.lab-hero h1 { font-size: 32px; letter-spacing: -0.02em; }
.lab-hero p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--tx2); max-width: 680px; }
.lab-grid {
  max-width: 1180px; margin: 0 auto; padding: 20px 16px 56px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.lab-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); text-decoration: none; min-height: 170px;
}
a.lab-card:hover { border-color: rgba(167,139,250,0.55); }
.lab-card .no { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--brand); }
.lab-card .em { font-size: 28px; }
.lab-card h2 { font-size: 18px; line-height: 1.35; }
.lab-card p { font-size: 14px; line-height: 1.6; color: var(--tx2); }
.lab-card .badge { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,0.10); color: var(--tx2); }
.lab-card .badge.pub { background: rgba(52,211,153,0.16); color: var(--ok); }
.lab-card.soon { opacity: 1; }
.lab-card.soon h2 { color: var(--tx2); }