/* =========================================================
   Design Tokens — 단일 소스 (다크 전용 · 라임 터미널 테마)
   기능 페이지 전체가 이 토큰을 공유합니다.
   토큰 이름은 유지하되 값만 새 테마로 교체했습니다.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* 표면(surface) */
  --bg: #070a07;                       /* 페이지 배경 */
  --bg-elev: rgba(16, 23, 15, 0.82);   /* 카드 (파티클이 비치도록 반투명) */
  --surface: rgba(10, 15, 10, 0.7);    /* 입력 배경 / 보조 면 */
  --surface-2: rgba(18, 26, 16, 0.85); /* 한 단계 밝은 보조 면 */

  /* 텍스트 */
  --fg: #d8e6d4;
  --fg-bright: #eaf5e6;                 /* 제목·강조 텍스트 */
  --muted: #7c8a78;

  /* 브랜드 액센트 (라임) */
  --brand: #9dff3a;
  --brand-hover: #b6ff66;
  --brand-dim: #6fa83a;
  --brand-soft: rgba(157, 255, 58, 0.13);

  /* 상태 색 */
  --ok: #9dff3a;
  --warn: #ffd23a;
  --err: #ff6b6b;

  /* 경계선 */
  --border: rgba(157, 255, 58, 0.14);
  --line: rgba(157, 255, 58, 0.12);

  /* 폰트 */
  --font-sans: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 모양 / 그림자 / 모션 */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 14px 40px -16px rgba(157, 255, 58, 0.4);
  --transition: all 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ----- 하위 호환 별칭 (기존 클래스/CSS가 참조) ----- */
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --card: var(--bg-elev);
  --card-bg: var(--bg-elev);
  --bg-color: var(--bg);
  --text-main: var(--fg);
  --text-muted: var(--muted);
  --border-color: var(--border);
  --danger: var(--err);
  --success: var(--ok);
  --acc: var(--brand);
  --acc-soft: var(--brand-soft);
  --acc-dim: var(--brand-dim);
  --panel: var(--bg-elev);
}

* {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* 본문 콘텐츠는 fx.js 가 주입하는 배경 효과 레이어 위에 위치 */
.container {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

/* 선택 영역 / 스크롤바 */
::selection {
  background: rgba(157, 255, 58, 0.28);
  color: #eaffd6;
}