/* 실험실 공용 덧씌움 — build.py 가 /lab/theme.css 로 내보내고, 각 실험 페이지의 <!--LAB_THEME--> 자리에 /ds.css · 이 파일 · 테마·버튼 반응 스크립트(lab_theme_head.html)를 넣는다.
   2026-10-10 디자인 통일: 네온·레트로 테마를 걷어 내고 포트폴리오 체계(/ds.css)를 그대로 쓴다. 각 페이지가 쓰던 색 이름(--panel · --glow …)은 아래에서 공용 값에 이어 붙인다.
   페이지 CSS 의 색은 모두 이 이름들로만 쓴다(박힌 색 없음 — 04 리포트 문서와 03 화면 캡처 모형만 종이색 그대로). 설명은 site/DESIGN_SYSTEM.md */

/* ── 옛 색 이름 → 공용 값(밝게·어둡게는 /ds.css 가 바꾼다) ── */
:root {
  --panel: var(--paper); --panel-2: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --glow: var(--acc); --glow-ink: var(--acc-ink); --soft: var(--warn);
  --bad-bg: color-mix(in srgb, var(--bad) 12%, transparent); --soft-bg: color-mix(in srgb, var(--warn) 14%, transparent);
  --sheet: var(--paper); --s-ink: var(--ink); --s-muted: var(--muted); --s-line: var(--line); --s-edge: var(--line-2);
  --s-hi: color-mix(in srgb, var(--acc) 8%, transparent); --s-head: color-mix(in srgb, var(--ink) 4%, transparent);
  --s-bad: var(--bad); --s-bad-bg: color-mix(in srgb, var(--bad) 12%, transparent); --s-soft: var(--warn); --s-soft-bg: color-mix(in srgb, var(--warn) 14%, transparent); --s-ok: var(--ok);
  --shade: color-mix(in srgb, #15171A 22%, transparent);   /* 그림자 색 — 밝은 바탕에서는 옅게 */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shade: #000; } }
:root[data-theme="dark"] { --shade: #000; }
html, body { background: var(--bg); }
body { font-family: var(--font); }
body::before { display: none; }   /* 네온의 격자·번짐 바탕은 쓰지 않는다(포트폴리오처럼 평평한 바탕) */

/* ── 머리줄 — 세 곳 공용 모양: 이름 · 사이트 바꾸기 · (실험 목록) · 테마. 높이는 /ds.css --bar ── */
.top { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
.top .in { height: var(--bar); gap: 14px; }
.me { color: var(--ink); white-space: nowrap; flex: none; }
.labscroll { position: relative; display: flex; flex: 0 1 auto; min-width: 0; }   /* 칩 줄 감싸개 — 넘치면 양 끝에 흐림 + ‹ › 단추(can-l · can-r 는 스크립트가 붙임) */
.labnav { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; scroll-behavior: smooth; overscroll-behavior-x: contain; }   /* 실험이 늘어도 머리줄이 넘치지 않게 — 좁으면 칩 줄만 옆으로 밀린다 */
.labnav::-webkit-scrollbar { display: none; }
.ls { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: var(--h-s); height: var(--h-s); margin-top: calc(var(--h-s) / -2); padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink-2); font: 700 18px/1 var(--font); cursor: pointer; box-shadow: 0 2px 8px -2px var(--shade); }
.ls:hover { border-color: var(--acc); color: var(--acc); }
.ls-l { left: 0; } .ls-r { right: 0; }
.labscroll.can-l .ls-l, .labscroll.can-r .ls-r { display: grid; }
.labscroll::before, .labscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.labscroll::before { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.labscroll::after { right: 0; background: linear-gradient(270deg, var(--bg) 30%, transparent); }
.labscroll.can-l::before, .labscroll.can-r::after { opacity: 1; }
.labnav a { flex: none; display: inline-flex; align-items: center; height: var(--h-s); padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: var(--fw-c) var(--fs-c)/1 var(--font); text-decoration: none; white-space: nowrap; transition: color .2s, border-color .2s; }
.labnav a:hover { border-color: var(--acc); color: var(--acc); }
.labnav a[aria-current] { background: color-mix(in srgb, var(--acc) 10%, var(--paper)); border-color: var(--acc); color: var(--ink); }
/* 칩 = 묶음 이름 넷(10-10 밤 · 번호·세부 앱 칩 없음) */
@media (max-width: 860px) {   /* 좁은 화면: 실험 목록은 둘째 줄로 */
  .top .in { flex-wrap: wrap; height: auto; row-gap: 0; }
  .top .in > .sp { height: var(--bar); }   /* 첫 줄 높이는 빈칸이 잡고, 나머지는 가운데 맞춤 */
  .labscroll { order: 10; flex: 1 0 100%; padding: 0 0 10px; }
  .labscroll .ls { margin-top: calc(var(--h-s) / -2 - 5px); }
}
@media (max-width: 520px) { .top .in { gap: 8px; width: calc(100% - 32px); } .me { display: none !important; } .labnav { gap: 4px; } .labnav a { padding: 0 10px; } }

/* ── 글자 — 포트폴리오와 같은 위계: 머리말(.tag)은 관점 색 14px 굵게 · 13px 아래는 쓰지 않는다 ── */
.tag { font: 700 var(--fs-c)/1.3 var(--font); letter-spacing: .02em; color: var(--acc); }
.panel h1, .lead { text-wrap: balance; }
.lead { line-height: 1.6; }
.stage:not(.intro) .tag { font-size: 13px; }
.steps li { font-size: 14.5px; }
.steps li.on { font-size: 15.5px; }
.steps .hint { font-size: 13.5px; line-height: 1.62; font-weight: 500; text-wrap: pretty; }
.fine, .rules li, .msg p { text-wrap: pretty; }
@media (min-width: 1280px) { .stage:not(.intro) .panel h1 { font-size: 40px; } }

/* ── 버튼 — 포트폴리오와 같은 네 종류 · 세 크기: 주 버튼(.glow = 먹색 채움, 올리면 관점 색) · 보조(테두리) · 아이콘(.theme) · 글자 링크
   크기: 시작(.big)·기본 = L 48 · 작게(.small) = M 40 · 글자 L 16 / M 14 · 굵기 600 · 알약 모서리 ── */
.btn { height: var(--h-l); padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font: var(--fw-c) var(--fs-l)/1 var(--font); gap: 8px; box-shadow: none; transition: border-color .2s, background .2s, color .2s; }   /* 눌림 모양(0.97배)은 바로 들어가고 바로 풀린다 */
.btn:hover { transform: none; border-color: var(--ink); }
.btn.glow { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; box-shadow: none; }
.btn.glow:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); box-shadow: none; }
.btn.big { height: var(--h-l); padding: 0 28px; font-size: var(--fs-l); box-shadow: none; }
.btn.small { height: var(--h-m); padding: 0 16px; font-size: var(--fs-c); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 22%, transparent); } }   /* 시작 버튼: 번짐 대신 옅은 고리 */
@media (prefers-reduced-motion: reduce) { .btn.big { animation: none; } }

/* ── 버튼 공용 반응(2026-10-09) — 누름(is-press) → 진행 중(is-busy · aria-busy) → 결과. 움직임 줄이기 설정이어도 '눌림·진행 중' 모양은 보인다(상태 변화라 움직임이 아님) ── */
.btn.is-press, .btn:active { transform: translateY(1px) scale(.97); filter: brightness(1.08); }
.tg.is-press, .labnav a.is-press, .sites a.is-press, .theme.is-press { transform: scale(.97); }
.btn.is-busy, .btn[aria-busy="true"] { cursor: progress; }
.btn.is-busy[disabled], .btn[aria-busy="true"][disabled] { opacity: .85; }
.btn.is-busy::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: labspin .7s linear infinite; }
@keyframes labspin { to { transform: rotate(360deg); } }

/* ── 실험실 배치(2026-10-09)
   설명 창 340px | 작업 창들 · 간격은 20px 하나 · 한 줄에 놓인 창은 높이를 맞춘다(설명 창 포함) · 설명 창 안 조작부는 화면을 따라 내려온다
   버튼 줄은 한 줄(주 버튼이 늘고 '처음으로'는 제 크기) ── */
@media (min-width: 1280px) {
  .stage:not(.intro) { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .stage:not(.intro) .panel { position: relative; top: 0; }
  .stage:not(.intro) .p-play { position: sticky; top: calc(var(--bar) + 24px); }
  .stage:not(.intro) .board { gap: 20px; align-items: stretch; }
}
@media (min-width: 641px) and (max-width: 1279px) { .stage:not(.intro), .stage:not(.intro) .board { gap: 20px; } }
.acts { flex-wrap: nowrap; }
.acts .btn { min-width: 0; padding: 0 16px; white-space: nowrap; }
.acts .btn.small { flex: 0 0 auto; }
.acts .btn, .acts .btn.small { height: var(--h-l); }   /* 한 줄에 놓인 버튼은 높이 하나(L) — '처음으로'도 작게 하지 않는다 */

/* ── 다국어(2026-10-10) — 언어 고르기 모양·일본어 줄바꿈은 /ds.css(세 곳 공용). 여기엔 실험실 휴대폰 배치만 ── */
/* 휴대폰 언어 고르기: 10-11 부터 지구본 단추 크기(/ds.css)라 첫 줄 테마 단추 옆에 그대로 둔다 */