/* =============================================================================
 * ui_template_theme.css
 * 글로벌 디자인 테마 및 CSS 변수 (라이트/다크)
 *
 * 출처: .agent/design.md — "Wiza" 스타일 레퍼런스
 * 원칙:
 *   - 모든 색상/간격/폰트는 이 파일의 CSS 변수(var(--...))로만 참조.
 *   - 하드코딩된 Hex/px 값을 컴포넌트에 직접 입력 금지 (frontend.md §1).
 *   - 8px radius가 시그니처. pill/tag만 --radius-pills 사용.
 * ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
   * 1. 색상 토큰 (Colors) — 바이올렛 단색 팔레트
   * ------------------------------------------------------------------------ */
  --color-deep-iris: #26114a; /* 헤드라인, filled 버튼 배경 (24px 이하) */
  --color-plum-velvet: #312749; /* 네비 텍스트, 보조 제목, 카드 타이틀 */
  --color-royal-amethyst: #3e0079; /* 링크, 포커스 링, 아이콘 하이라이트 */
  --color-mist-violet: #edecff; /* 소프트 하이라이트 배경, 태그 배경 */
  --color-lavender-wash: #b99aff; /* 그라디언트 스톱, 히어로 분위기 */
  --color-twilight-beam: #cf8aff; /* 멀티스톱 장식 그라디언트 시작색 */

  /* 중립 (Neutrals) */
  --color-canvas: #ffffff; /* 페이지 배경, 카드 표면, 입력 필드 */
  --color-paper: #f6f7fa; /* 미묘한 표면 리프트, 테이블 교차행 */
  --color-mist: #e6e2e3; /* 헤어라인 보더, 구분선 */
  --color-smoke: #c1c7cf; /* 비활성 상태, 스켈레톤 플레이스홀더 */
  --color-ash: #9491a1; /* 뮤트 헬퍼 텍스트, placeholder */
  --color-slate: #615e6e; /* 보조 본문 텍스트, 설명 */
  --color-charcoal: #333333; /* 본문 텍스트, 링크, 아이콘 스트로크 */
  --color-carbon: #222222; /* 다크 UI 요소, 니어블랙 액센트 */
  --color-ink: #000000; /* 최대 대비 텍스트/보더 */

  /* 상태 색상 (Status) — 바이올렛 계열 유지, 필수 기능색만 최소 추가 */
  --color-success: #1f8a4c; /* 성공/승인 */
  --color-warning: #b8860b; /* 경고 (design.md 별색 #f5b800 계열) */
  --color-danger: #c0392b; /* 에러/삭제 */
  --color-info: var(--color-royal-amethyst);

  /* 그라디언트 (Gradient System) — 항상 흰 표면 뒤에만 배치, 텍스트 직상단 금지 */
  --gradient-lavender-wash: linear-gradient(
    90deg,
    rgb(185, 154, 255),
    rgb(125, 67, 255) 10%,
    rgba(125, 67, 255, 0)
  );
  --gradient-twilight-beam: linear-gradient(
    to right,
    rgb(207, 138, 255),
    rgb(255, 102, 193),
    rgb(255, 173, 116),
    rgb(170, 129, 255)
  );
  --gradient-section-tint: linear-gradient(
    to bottom,
    var(--color-canvas),
    var(--color-mist-violet)
  );

  /* ---------------------------------------------------------------------------
   * 2. 의미 기반 별칭 (Semantic Aliases)
   *    컴포넌트는 가급적 아래 별칭을 사용해 라이트/다크 전환에 대응.
   * ------------------------------------------------------------------------ */
  --color-bg: var(--color-canvas); /* 페이지 배경 */
  --color-surface: var(--color-paper); /* 카드/패널 표면 */
  --color-surface-raised: var(--color-canvas); /* 떠 있는 표면 */
  --color-border: var(--color-mist); /* 기본 보더 */
  --color-text: var(--color-deep-iris); /* 기본 본문 (제목 강조) */
  --color-text-body: var(--color-charcoal); /* 일반 본문 */
  --color-text-secondary: var(--color-slate); /* 보조 텍스트 */
  --color-text-muted: var(--color-ash); /* 뮤트/placeholder */
  --color-primary: var(--color-deep-iris); /* 주 액션 배경 */
  --color-primary-text: var(--color-canvas); /* 주 액션 위 텍스트 */
  --color-accent: var(--color-royal-amethyst); /* 링크/액센트 */
  --color-focus-ring: var(--color-royal-amethyst);

  /* 차트 시리즈 색상 (CPU/메모리/디스크 등 구분용) */
  --color-chart-0: #5b8def; /* 파랑 — CPU */
  --color-chart-1: #34c38f; /* 초록 — 메모리 */
  --color-chart-2: #f1963b; /* 주황 — 디스크 */
  --color-chart-3: #9b6dde; /* 보라 — 예비 */

  /* ---------------------------------------------------------------------------
   * 3. 타이포그래피 (Typography)
   * ------------------------------------------------------------------------ */
  /* 폰트 패밀리 — 한글은 Noto Sans KR 우선 (resources/fonts) */
  --font-display:
    "Britti Sans", "Plus Jakarta Sans", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-body:
    "Inter", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* 스케일 (px 고정 — design.md 명세) */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --text-heading: 40px;
  --leading-heading: 1;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1;
  --text-display: 64px;
  --leading-display: 1;

  /* 굵기 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------------------------
   * 4. 간격 (Spacing) — 8px 기반, compact density
   * ------------------------------------------------------------------------ */
  --spacing-unit: 8px;
  --spacing-4: 4px; /* pill/tag 세로 패딩용 하프 유닛 */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-216: 216px;

  /* ---------------------------------------------------------------------------
   * 5. 보더 반경 (Border Radius) — 8px 시그니처
   * ------------------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius-lg: 8px; /* 카드/버튼/입력/아이콘 = 시그니처 */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px; /* large 컨테이너 */
  --radius-pills: 1440px; /* pill/tag/캡슐 네비 전용 */

  --radius-cards: var(--radius-lg);
  --radius-buttons: var(--radius-lg);
  --radius-inputs: var(--radius-lg);
  --radius-icons: var(--radius-lg);
  --radius-large: var(--radius-3xl);

  /* ---------------------------------------------------------------------------
   * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)
   * ------------------------------------------------------------------------ */
  --shadow-sm:
    rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px,
    rgba(18, 55, 105, 0.08) 0px 0px 0px 1px;
  --shadow-lg:
    rgba(14, 59, 101, 0.06) 0px 32px 24px -12px, rgba(14, 59, 101, 0.01) 0px 11px 4px 0px,
    rgba(14, 59, 101, 0.02) 0px 6px 4px 0px, rgba(14, 59, 101, 0.03) 0px 3px 3px 0px,
    rgba(14, 59, 101, 0.04) 0px 1px 1px 0px;
  --shadow-feature:
    rgba(114, 49, 255, 0.32) 0px -6px 20px 0px inset, rgba(47, 1, 151, 0.12) 0px 11px 12px 0px,
    rgba(47, 1, 151, 0.12) 0px 3px 3px 0px, rgba(47, 1, 151, 0.12) 0px 1px 1px 0px,
    rgba(47, 1, 151, 0.08) 0px 0px 0px 1px;

  /* ---------------------------------------------------------------------------
   * 7. 레이아웃 (Layout)
   * ------------------------------------------------------------------------ */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Scrollbar */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 20%, transparent);
  --color-scrollbar-thumb-active: color-mix(in srgb, var(--color-text) 28%, transparent);

  /* 워크플로우 3단 레이아웃 (frontend.md §2) */
  --wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
  --wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */

  /* ---------------------------------------------------------------------------
   * 8. 상호작용 (Motion & Z-index)
   * ------------------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* =============================================================================
 * 다크 모드 (Dark) — 라이트 우선 브랜드이나 CAD 뷰어 야간 작업 대응
 *   design.md는 light 브랜드이므로, 다크는 중립 표면을 어둡게 반전하고
 *   바이올렛 액센트는 명도를 올려 대비 확보.
 * ========================================================================== */
:root[data-theme="dark"] {
  --color-canvas: #16121f;
  --color-paper: #1e1930;
  --color-mist: #322a45;
  --color-smoke: #4a4160;
  --color-ash: #8b86a0;
  --color-slate: #b3aec6;
  --color-charcoal: #e4e0f0;
  --color-carbon: #f0edf8;
  --color-ink: #ffffff;

  --color-deep-iris: #d8ccff;
  --color-plum-velvet: #c4b8e6;
  --color-royal-amethyst: #b99aff;
  --color-mist-violet: #2a2140;

  --color-bg: var(--color-canvas);
  --color-surface: var(--color-paper);
  --color-surface-raised: #251f38;
  --color-border: var(--color-mist);
  --color-text: var(--color-deep-iris);
  --color-text-body: var(--color-charcoal);
  --color-text-secondary: var(--color-slate);
  --color-text-muted: var(--color-ash);
  --color-primary: var(--color-royal-amethyst);
  --color-primary-text: #16121f;
  --color-accent: var(--color-lavender-wash);
  --color-focus-ring: var(--color-lavender-wash);

  --color-success: #3fbb6f;
  --color-warning: #e0b64a;
  --color-danger: #e8695a;

  --shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
}

/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: #16121f;
    --color-paper: #1e1930;
    --color-mist: #322a45;
    --color-smoke: #4a4160;
    --color-ash: #8b86a0;
    --color-slate: #b3aec6;
    --color-charcoal: #e4e0f0;
    --color-carbon: #f0edf8;
    --color-ink: #ffffff;

    --color-deep-iris: #d8ccff;
    --color-plum-velvet: #c4b8e6;
    --color-royal-amethyst: #b99aff;
    --color-mist-violet: #2a2140;

    --color-bg: var(--color-canvas);
    --color-surface: var(--color-paper);
    --color-surface-raised: #251f38;
    --color-border: var(--color-mist);
    --color-text: var(--color-deep-iris);
    --color-text-body: var(--color-charcoal);
    --color-text-secondary: var(--color-slate);
    --color-text-muted: var(--color-ash);
    --color-primary: var(--color-royal-amethyst);
    --color-primary-text: #16121f;
    --color-accent: var(--color-lavender-wash);
    --color-focus-ring: var(--color-lavender-wash);
  }
}

/* =============================================================================
 * 기본 리셋 및 문서 스타일
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 일반 페이지의 가로·세로 스크롤바를 동일한 얇은 테마로 표시한다.
 * B07 CAD iframe은 별도 문서이므로 이 전역 스타일의 영향을 받지 않는다. */
* {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  scrollbar-width: thin;
}

@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    background-color: transparent;
  }

  *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pills);
    background-color: var(--color-scrollbar-thumb);
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: var(--color-scrollbar-thumb-active);
  }

  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  *::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }
}

/* ─── 공용 접기 컨테이너 (ui_template_collapsible.ts) ─────────────────────────
   컨테이너에 `ui-collapsible`, 제목에 `ui-collapsible__title`을 주면 제목 행 전체가
   클릭 영역이 되고, 접히면 제목을 뺀 직속 자식이 숨겨진다. 펼침 ▾ / 접힘 ▸ 캐럿 표시. */
.ui-collapsible__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8, 8px);
  cursor: pointer;
  user-select: none;
}

.ui-collapsible__title::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.8em;
}

.ui-collapsible.is-collapsed > .ui-collapsible__title::after {
  content: "▸";
}

.ui-collapsible.is-collapsed > :not(.ui-collapsible__title) {
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1;
}

h1 {
  font-size: var(--text-heading);
}
h2 {
  font-size: var(--text-heading-sm);
}
h3 {
  font-size: var(--text-subheading);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}