/* ============================================================
   BLOCK 실험실(lab) 공용 디자인 토큰
   - 다크 몰입형 경험(3dmetro / lilo-flow / electric-power / agriculture / hometown / tudish)이 공유한다.
   - 각 페이지는 자기 프리픽스 변수(--home-*, --metro-* 등)를 이 토큰에 매핑해
     시각 톤을 통일한다. 강조색(accent)만 페이지 고유로 둔다.
   - boundaries 는 라이트/다크 양쪽을 지원하므로 자체 파일에서 이 토큰을 오버라이드한다.
   ============================================================ */
:root {
  color-scheme: dark;

  /* 표면 계층 */
  --lab-bg: #070709;
  --lab-bg-deep: #050506;
  --lab-panel: rgba(19, 20, 18, 0.82);
  --lab-panel-strong: rgba(28, 29, 25, 0.92);
  --lab-surface: rgba(255, 255, 255, 0.035);
  --lab-surface-raised: rgba(255, 255, 255, 0.06);
  --lab-surface-hover: rgba(255, 255, 255, 0.09);

  /* 라인 */
  --lab-line: rgba(255, 255, 255, 0.1);
  --lab-line-strong: rgba(255, 255, 255, 0.2);
  --lab-line-faint: rgba(255, 255, 255, 0.06);

  /* 텍스트 */
  --lab-ink: #f4f2ec;
  --lab-ink-strong: #fffaf0;
  --lab-muted: rgba(244, 242, 236, 0.66);
  --lab-dim: rgba(244, 242, 236, 0.46);
  --lab-faint: rgba(244, 242, 236, 0.3);

  /* 형태 */
  --lab-radius-sm: 6px;
  --lab-radius: 8px;
  --lab-radius-lg: 14px;
  --lab-radius-pill: 999px;

  /* 그림자 */
  --lab-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
  --lab-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.34);
  --lab-shadow-lg: 0 20px 54px rgba(0, 0, 0, 0.42);

  /* 유리 효과 */
  --lab-blur: 14px;

  /* 컨트롤 규격 */
  --lab-control-size: 40px;
  --lab-edge: max(18px, env(safe-area-inset-top));

  /* 폰트 (horizon-v2 의 --font-family / --font-mono 를 폴백과 함께 노출) */
  --lab-font: var(--font-family, "Instrument Sans"), "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --lab-mono: var(--font-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.lab-panel-drag-handle,
.lab-panel-edge-handle {
  border: 0;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.lab-panel-drag-handle[hidden],
.lab-panel-edge-handle[hidden] {
  display: none !important;
}

.lab-panel-drag-handle {
  display: none;
}

.lab-panel-edge-handle {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 30;
  display: none;
  width: 74px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--lab-radius-pill);
  background: rgba(18, 19, 18, 0.82);
  box-shadow: var(--lab-shadow-md);
  backdrop-filter: blur(var(--lab-blur));
  transform: translateX(-50%) translateY(var(--lab-panel-edge-offset, 0));
  touch-action: none;
}

.lab-panel-drag-handle span,
.lab-panel-edge-handle span {
  display: block;
  width: 38px;
  height: 4px;
  border-radius: var(--lab-radius-pill);
  background: rgba(244, 242, 236, 0.48);
}

.lab-mobile-panel-dragging {
  transform: translateY(var(--lab-panel-drag-offset, 0)) !important;
  transition: none !important;
}

/* ============================================================
   공용 컴포넌트: 아이콘 버튼 / 로딩·토스트 배지 / 스피너
   - agriculture(.ag-*) / electric-power(.ep-*) / lilo-flow(.lilo-*) /
     urban-development-density(.udd-*)가 완전히 동일한 규칙을 각자 CSS 파일에
     복제해 두고 있던 것을 추출했다.
   - 강조색만 페이지별로 다르므로 각 페이지가 자기 body 스코프에서
     --lab-accent 를 지정한다(hover 테두리·스피너 색에 쓰인다).
   - hometown / 3dmetro는 아이콘 크기·로딩 애니메이션이 실제로 달라
     이번 통합 대상에서 제외했다(별도 검토 필요).
   ============================================================ */
.ag-icon-button,
.ep-icon-button,
.lilo-icon-button,
.udd-icon-button,
.lilo-play {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lab-line-strong);
  border-radius: var(--lab-radius);
  background: var(--lab-panel);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(var(--lab-blur));
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.ag-icon-button:hover,
.ag-icon-button:focus-visible,
.ep-icon-button:hover,
.ep-icon-button:focus-visible,
.lilo-icon-button:hover,
.lilo-icon-button:focus-visible,
.udd-icon-button:hover,
.udd-icon-button:focus-visible,
.lilo-play:hover,
.lilo-play:focus-visible {
  border-color: color-mix(in srgb, var(--lab-accent, #f7c95f) 52%, transparent);
  background: var(--lab-panel-strong);
  color: #ffffff;
  outline: none;
}

.ag-icon-button .material-symbols-outlined,
.ep-icon-button .material-symbols-outlined,
.lilo-icon-button .material-symbols-outlined,
.udd-icon-button .material-symbols-outlined,
.lilo-play .material-symbols-outlined {
  font-size: 21px;
}

.ag-icon-button--small,
.ep-icon-button--small,
.lilo-icon-button--small,
.udd-icon-button--small {
  width: 30px;
  height: 30px;
  border-radius: var(--lab-radius-sm);
  background: var(--lab-surface-raised);
  backdrop-filter: none;
}

.ag-icon-button--small .material-symbols-outlined,
.ep-icon-button--small .material-symbols-outlined,
.lilo-icon-button--small .material-symbols-outlined,
.udd-icon-button--small .material-symbols-outlined {
  font-size: 18px;
}

.ag-icon-button:disabled,
.ep-icon-button:disabled,
.lilo-icon-button:disabled,
.udd-icon-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.ag-loading,
.ag-toast,
.ep-loading,
.ep-toast,
.lilo-loading,
.lilo-toast,
.udd-loading,
.udd-toast {
  position: absolute;
  z-index: 12;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--lab-line-strong);
  border-radius: var(--lab-radius);
  background: var(--lab-panel);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(var(--lab-blur));
  transform: translateX(-50%);
}

.ag-loading,
.ep-loading,
.lilo-loading,
.udd-loading {
  top: 50%;
  transform: translate(-50%, -50%);
}

.ag-spinner,
.ep-spinner,
.lilo-spinner,
.udd-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--lab-accent, #f7c95f);
  border-radius: 50%;
  animation: lab-spin 0.82s linear infinite;
}

@keyframes lab-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-spinner,
  .ep-spinner,
  .lilo-spinner,
  .udd-spinner {
    animation: none;
  }
}

@media (max-width: 980px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .lab-panel-drag-handle {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 4px 0 2px;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  .lab-panel-edge-handle {
    display: flex;
  }
}