/* =========================================================
 * ebutcam-home / design-system.css
 * ---------------------------------------------------------
 * 톤: 이벗 공식 /cam 페이지 — 딥 블랙 + 앰버(레코딩 컬러)
 * - 모던 SaaS 다크 모드
 * - 큰 헤딩 (clamp 활용)
 * - 한국어 가독성 (line-height 1.75)
 * - 50대 친화 (모바일 본문 17px)
 * ========================================================= */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
    /* 브랜드 컬러 — 딥 네이비 + 블루 액센트 (B2B 신뢰감) */
    --color-primary:        #001E3C;   /* 딥 네이비 — Hero/Footer 배경 */
    --color-primary-2:      #003366;   /* 한 톤 위 네이비 */
    --color-primary-3:      #0F2A4D;   /* 다크 위 카드 배경 */

    --color-accent:         #2563EB;   /* 블루 — CTA, 강조 */
    --color-accent-hover:   #1D4ED8;
    --color-accent-deep:    #1E40AF;
    --color-accent-bright:  #60A5FA;   /* 텍스트 강조용 (다크 위) */
    --color-accent-soft:    #93C5FD;   /* 라이트 텍스트 강조 */
    --color-accent-light:   #E0EBFA;   /* 라이트 배경, 포커스 링 */
    --color-accent-glow:    rgba(37, 99, 235, 0.35);

    /* 중립 컬러 */
    --color-bg:             #ffffff;
    --color-bg-subtle:      #F1F5F9;   /* 쿨톤 라이트 그레이 */
    --color-bg-muted:       #E2E8F0;
    --color-bg-dark:        #001E3C;   /* Hero / Footer */
    --color-bg-dark-2:      #003366;   /* 다크 위 카드 */

    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-border-dark:    rgba(255, 255, 255, 0.12);

    /* 텍스트 */
    --color-text:           #0F172A;
    --color-text-secondary: #334155;
    --color-text-muted:     #64748B;

    --color-text-on-dark:         #FFFFFF;
    --color-text-secondary-on-dark: rgba(255, 255, 255, 0.78);
    --color-text-muted-on-dark:    rgba(255, 255, 255, 0.50);

    /* 시맨틱 */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
    --color-info:    #2563EB;

    /* 간격 (8px 베이스) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* 라운드 — /cam 페이지 톤: 카드는 큰 라운드, 버튼은 필(pill) */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 99px;     /* 버튼 — 필 모양 */
    --radius-full: 9999px;

    /* 그림자 */
    --shadow-sm:  0 1px 2px rgba(0, 30, 60, 0.05);
    --shadow-md:  0 4px 12px rgba(0, 30, 60, 0.08);
    --shadow-lg:  0 12px 32px rgba(0, 30, 60, 0.12);
    --shadow-xl:  0 24px 48px rgba(0, 30, 60, 0.18);
    --shadow-cta: 0 8px 24px var(--color-accent-glow);
    --shadow-cta-hover: 0 12px 32px rgba(37, 99, 235, 0.45);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.30);

    /* 폰트 사이즈 — clamp 광범위 사용 (이벗 /cam 방식) */
    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 16px;     /* 1rem */
    --font-size-md:   17px;
    --font-size-lg:   18px;
    --font-size-xl:   20px;
    --font-size-2xl:  24px;
    --font-size-3xl:  30px;
    --font-size-4xl:  36px;
    --font-size-5xl:  48px;
    --font-size-6xl:  60px;

    /* 헤딩 사이즈 (clamp — 화면 폭에 따라 자동 조정) */
    --h1-size: clamp(2.4rem, 5vw, 4rem);          /* 38.4 ~ 64px */
    --h2-size: clamp(1.8rem, 3.5vw, 2.8rem);      /* 28.8 ~ 44.8px */
    --h3-size: clamp(1.25rem, 1.8vw, 1.6rem);     /* 20 ~ 25.6px */
    --hero-title-size: clamp(2.6rem, 5.5vw, 4.8rem);  /* Hero 전용 41.6 ~ 76.8px */
    --hero-sub-size:   clamp(1.05rem, 1.8vw, 1.3rem); /* Hero 서브 16.8 ~ 20.8px */

    /* 라인 높이 — 이벗 /cam: 헤딩 1.08, 본문 1.75 */
    --leading-tight:   1.08;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;
    --leading-loose:   2;

    /* letter-spacing — 헤딩 타이트, eyebrow 와이드 */
    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.03em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-widest:  0.1em;

    /* 컨테이너 최대 폭 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1240px;

    /* 트랜지션 */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* z-index */
    --z-header:  100;
    --z-overlay: 900;
    --z-modal:   1000;
    --z-toast:   1100;

    /* 헤더 높이 */
    --header-height: 76px;
    --nav-height:    76px;   /* 이벗 호환 */
}

/* ---------- 2. 리셋 + 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    font-family:
        'Pretendard Variable', 'Pretendard',
        -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo', 'Noto Sans KR',
        'Malgun Gothic', '맑은 고딕',
        system-ui, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: var(--tracking-tight);
}

/* 한국어 가독성 */
p, li, dd, blockquote {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ---------- 3. 타이포그래피 (이벗 /cam 톤) ---------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-text);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    word-break: keep-all;
}

h1 { font-size: var(--h1-size); line-height: 1.1; }
h2 { font-size: var(--h2-size); line-height: 1.15; font-weight: 800; }
h3 { font-size: var(--h3-size); font-weight: 700; line-height: 1.3; letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--font-size-xl);  font-weight: 700; letter-spacing: var(--tracking-tight); }
h5 { font-size: var(--font-size-lg);  font-weight: 700; }
h6 { font-size: var(--font-size-base); font-weight: 700; }

p {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

strong, b { font-weight: 700; color: var(--color-text); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); }
a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

small { font-size: var(--font-size-sm); color: var(--color-text-muted); }

ul, ol { padding-left: var(--space-6); margin: 0 0 var(--space-4) 0; }
li { margin-bottom: var(--space-2); }

/* ---------- 4. 미디어 ---------- */
img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- 5. 폼 기본 ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.6; }

/* ---------- 6. 다크 섹션 ---------- */
.bg-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 {
    color: var(--color-text-on-dark);
}
.bg-dark p { color: var(--color-text-secondary-on-dark); }
.bg-dark a { color: var(--color-accent-bright); }
.bg-dark small { color: var(--color-text-muted-on-dark); }

/* ---------- 7. 유틸리티 ---------- */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.section { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-24) 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.bg-dark .eyebrow { color: var(--color-text-muted-on-dark); }

.lead {
    font-size: var(--hero-sub-size);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
}

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

.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;
    top: -40px; left: 0;
    background: var(--color-accent);
    color: white;
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-modal);
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; color: white; }

/* 녹화 점멸 dot (이벗 /cam 시그니처) */
.rec-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent-glow);
    animation: recBlink 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes recBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--color-accent-glow); }
    50% { opacity: 0.35; box-shadow: none; }
}

/* ---------- 8. 반응형 ---------- */
@media (max-width: 767px) {
    :root {
        --font-size-base: 17px;
        --space-20: 60px;
        --space-24: 72px;
    }
}

/* ---------- 9. 접근성: 모션 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .rec-dot { animation: none; }
}