@import './tokens.css';

/*
 * ── 다크 테마 (W5 NFR) ──
 * 값 단일 출처: `--dk-*` 상수를 :root 에 정의 → 명시 선택(data-theme=dark)과
 * 시스템 선호(@media, 명시 선택 없을 때) 두 경로가 동일 값을 remap 한다.
 * 라이트가 기본 — data-theme 미지정 + OS 라이트면 tokens.css :root 원본을 그대로 사용.
 * 런타임은 themeStore 가 document.documentElement[data-theme] 를 항상 스탬프한다.
 */
:root {
  /* 다크 팔레트 상수 (slate — 캔버스 #1C2536 계열 정렬) */
  --dk-neutral-050: #10151f; /* 앱 배경 */
  --dk-surface: #1a2130; /* 카드/화이트 서피스 */
  --dk-neutral-100: #232c3d;
  --dk-neutral-200: #2f3a4c; /* 보더·구분선 */
  --dk-neutral-500: #8b94a4;
  --dk-neutral-700: #c6ced9;
  --dk-neutral-900: #f0f3f8;
  --dk-primary-600: #3f9ae2;
  --dk-primary-700: #62b0ea;
  --dk-primary-900: #2d7cc0;
  --dk-primary-100: #16344c; /* 활성 사이드바 */
  --dk-primary-050: #14202f; /* 서브 배경·테이블 호버 */
  --dk-ai-accent: #9a80ff;
  --dk-ai-surface: #221d39;
  --dk-ai-bg: #2a2247;
  --dk-ai-accent-strong: #7c5cff;
  --dk-success: #34c88b;
  --dk-warning: #e0983a;
  --dk-error: #f4796d;
  --dk-success-bg: #122a20;
  --dk-warning-bg: #2c2413;
  --dk-error-bg: #2e1a19;
  --dk-violation-warn-bg: #3a2c10;
  --dk-violation-warn-text: #e5a54a;
  --dk-row-hover: #222c3c;
  --dk-zebra: #151c28;
  --dk-skeleton-a: #1e2634;
  --dk-skeleton-b: #28323f;
  --dk-ai-skeleton-a: #221d39;
  --dk-ai-skeleton-b: #2c2547;
}

/* remap 리스트 — 명시 다크 선택 */
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-neutral-050: var(--dk-neutral-050);
  --color-white: var(--dk-surface);
  --color-neutral-100: var(--dk-neutral-100);
  --color-neutral-200: var(--dk-neutral-200);
  --color-neutral-500: var(--dk-neutral-500);
  --color-neutral-700: var(--dk-neutral-700);
  --color-neutral-900: var(--dk-neutral-900);
  --color-primary-600: var(--dk-primary-600);
  --color-primary-700: var(--dk-primary-700);
  --color-primary-900: var(--dk-primary-900);
  --color-primary-100: var(--dk-primary-100);
  --color-primary-050: var(--dk-primary-050);
  --color-ai-accent: var(--dk-ai-accent);
  --color-ai-surface: var(--dk-ai-surface);
  --color-ai-bg: var(--dk-ai-bg);
  --color-ai-accent-strong: var(--dk-ai-accent-strong);
  --color-success: var(--dk-success);
  --color-warning: var(--dk-warning);
  --color-error: var(--dk-error);
  --color-success-bg: var(--dk-success-bg);
  --color-warning-bg: var(--dk-warning-bg);
  --color-error-bg: var(--dk-error-bg);
  --color-violation-warn-bg: var(--dk-violation-warn-bg);
  --color-violation-warn-text: var(--dk-violation-warn-text);
  --row-hover: var(--dk-row-hover);
  --zebra: var(--dk-zebra);
  --skeleton-a: var(--dk-skeleton-a);
  --skeleton-b: var(--dk-skeleton-b);
  --ai-skeleton-a: var(--dk-ai-skeleton-a);
  --ai-skeleton-b: var(--dk-ai-skeleton-b);
  --focus-ring: var(--dk-primary-700);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-level2: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 시스템 선호 폴백 — 명시 선택(data-theme) 없고 OS 다크일 때 (pre-JS/no-JS 대비) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-neutral-050: var(--dk-neutral-050);
    --color-white: var(--dk-surface);
    --color-neutral-100: var(--dk-neutral-100);
    --color-neutral-200: var(--dk-neutral-200);
    --color-neutral-500: var(--dk-neutral-500);
    --color-neutral-700: var(--dk-neutral-700);
    --color-neutral-900: var(--dk-neutral-900);
    --color-primary-600: var(--dk-primary-600);
    --color-primary-700: var(--dk-primary-700);
    --color-primary-900: var(--dk-primary-900);
    --color-primary-100: var(--dk-primary-100);
    --color-primary-050: var(--dk-primary-050);
    --color-ai-accent: var(--dk-ai-accent);
    --color-ai-surface: var(--dk-ai-surface);
    --color-ai-bg: var(--dk-ai-bg);
    --color-ai-accent-strong: var(--dk-ai-accent-strong);
    --color-success: var(--dk-success);
    --color-warning: var(--dk-warning);
    --color-error: var(--dk-error);
    --color-success-bg: var(--dk-success-bg);
    --color-warning-bg: var(--dk-warning-bg);
    --color-error-bg: var(--dk-error-bg);
    --color-violation-warn-bg: var(--dk-violation-warn-bg);
    --color-violation-warn-text: var(--dk-violation-warn-text);
    --row-hover: var(--dk-row-hover);
    --zebra: var(--dk-zebra);
    --skeleton-a: var(--dk-skeleton-a);
    --skeleton-b: var(--dk-skeleton-b);
    --ai-skeleton-a: var(--dk-ai-skeleton-a);
    --ai-skeleton-b: var(--dk-ai-skeleton-b);
    --focus-ring: var(--dk-primary-700);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-level2: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-neutral-700);
  background: var(--color-neutral-050);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-700);
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
}

/* 숫자·좌표·금액 tabular numerals */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
 * 중간 타이틀(섹션/카드 제목) 선행 아이콘 헬퍼 (2026-07 전수 스윕)
 * - 타이틀 요소의 첫 자식 <svg> 로 삽입 → 텍스트 컨텍스트/flex 컨텍스트 모두 대응.
 *   · 일반(블록/인라인) 제목: vertical-align 로 캡하이트 중앙 정렬 + margin 간격.
 *   · flex 제목(display:flex): align-items 가 중앙 정렬, flex:none 로 축소 방지.
 * - 색은 토큰만(--color-primary-600 기본 · --muted 는 neutral-500).
 * - 페이지 대제목(h1)은 대상 아님 — 중간 타이틀에만 부착한다.
 * ══════════════════════════════════════════════════════════ */
.kx-title-ic {
  display: inline-block;
  flex: none;
  vertical-align: -0.16em;
  margin-right: 0.42em;
  color: var(--color-primary-600);
}
.kx-title-ic--muted {
  color: var(--color-neutral-500);
}
/* flex 컨텍스트(제목 요소 자체가 flex)에서는 margin 대신 부모 gap 이 간격을 준다 —
 * 그런 제목은 이미 gap 을 가지므로 아이콘 margin 이 이중 간격이 되지 않도록 소거. */
.kx-card__header .kx-title-ic,
.kx-card__head .kx-title-ic,
.kx-dock__panel-title .kx-title-ic {
  margin-right: 0;
}
.kx-card__header h2,
.kx-card__header h3,
.kx-card__head h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

/* 접근성: 키보드 포커스 링 (WCAG AA) — 토큰화(테마별 대비 확보) */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* prefers-reduced-motion 존중 — 전역 (셸·화면 공통) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 스킵 링크 — 키보드 사용자용 "본문 바로가기" (포커스 시 노출) */
.kx-skip-link {
  position: absolute;
  left: var(--space-3);
  top: -48px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-600);
  color: var(--color-on-accent);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: top 0.15s ease;
}
.kx-skip-link:focus-visible {
  top: var(--space-3);
  color: var(--color-on-accent);
}
