/* =============================================================
   Neurowiztek 제품 문서 공통 기반 스타일 (docs-base.css)
   - 디자인 토큰, 리셋, 타이포그래피, 링크, 이미지, 접근성
   - 제품별 강조색은 body 클래스(.product-*)로 --color-primary만 교체
   - 모든 제품 문서(사용설명서/퀵 가이드/앱 사용법)가 공용
   ============================================================= */

/* ── 디자인 토큰 ─────────────────────────────────────────── */
:root {
    /* 회사 공통 기본 강조색(제품 클래스가 없을 때의 기본값) */
    --color-primary: #0b6cf0;
    --color-primary-dark: #084ba8;
    --color-primary-soft: rgba(11, 108, 240, 0.1);
    --color-secondary: #0e9f6e;

    /* 본문·보조·경계·배경 */
    --color-text: #1f2733;
    --color-text-muted: #566072;
    --color-background: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f5fb;
    --color-border: #e1e7f0;

    /* 상태색 */
    --color-info: #0b6cf0;
    --color-warning: #b7791f;
    --color-danger: #d1242f;
    --color-tip: #0e9f6e;

    /* 글꼴·크기 */
    --font-body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "D2Coding", Consolas, monospace;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-h1: 1.9rem;
    --font-size-h2: 1.4rem;
    --font-size-h3: 1.12rem;

    /* 여백 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* 모서리·그림자 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.04);

    /* 레이아웃 */
    --content-max-width: 820px;
    --header-height: 60px;
}

/* ── 제품별 강조색(accent) ──────────────────────────────────
   컴포넌트 규칙은 모두 var(--color-primary)를 참조하므로,
   body에 제품 클래스를 부여하면 강조색만 일괄 교체된다.
   새 제품 추가 시 아래에 한 블록만 추가한다. (docs/README.md 참고) */
.product-vetwiz-ecg {
    --color-primary: #0b6cf0;
    --color-primary-dark: #084ba8;
    --color-primary-soft: rgba(11, 108, 240, 0.1);
}

.product-vetwiz-eeg {
    --color-primary: #7a3cf0;
    --color-primary-dark: #5220a8;
    --color-primary-soft: rgba(122, 60, 240, 0.1);
}

.product-signalwiz {
    --color-primary: #6a4bd8;
    --color-primary-dark: #45309a;
    --color-primary-soft: rgba(106, 75, 216, 0.1);
}

.product-measurewiz {
    --color-primary: #0e9f6e;
    --color-primary-dark: #0a6b4a;
    --color-primary-soft: rgba(14, 159, 110, 0.1);
}

/* ── 리셋 & 기본 ─────────────────────────────────────────── */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.75;
    color: var(--color-text);
    background: var(--color-background);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

img {
    max-width: 100%;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

code {
    font-family: var(--font-mono);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 0.86em;
    color: var(--color-primary-dark);
}

/* ── 접근성: 포커스 표시 유지 ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 스크린리더 전용(화면에는 숨김) — 표 caption 등 접근성용 */
.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;
}

/* 건너뛰기 링크 */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 200;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

/* ── 모션 최소화 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
        animation: none !important;
    }
}
