/* MAX IMPACT SECURITY SERVICE — 공유 디자인 토큰 · 프리미티브
 *
 * 공개 랜딩(landing.css)과 관리 콘솔(console.css + Tailwind)이 함께 쓴다. 여기에는 두 곳이 같은
 * 모양이어야 하는 것(색·반경·그림자·글꼴, 버튼·칩·아이브로·형광펜·리빌)만 둔다. 레이아웃은 각 페이지 몫.
 *
 * 톤: 딥 네이비(#0b1120) 위에 스카이(#38bdf8) 하나만 강조색으로 쓴다. 큰 라운드 카드(20·28px),
 * 층층이 쌓은 부드러운 그림자, 굵고 촘촘한 한글 헤드라인(Pretendard 800)이 기본 언어다.
 * 상태색(초록·호박·장미)은 의미가 있는 곳에서만 쓴다.
 *
 * ※ Tailwind(Play CDN)는 이 파일보다 뒤에 자기 <style> 을 붙이므로, 같은 특이도에서는 유틸리티가 이긴다.
 *    그래서 여기 클래스는 전부 `mx-` 접두사로 충돌을 피했다.
 */

:root {
  /* 네이비(잉크) */
  --mx-ink: #0b1120;
  --mx-ink-2: #131c31;
  --mx-ink-3: #1c2740;
  --mx-ink-4: #2d3d58;

  /* 브랜드(스카이) */
  --mx-brand: #38bdf8;
  --mx-brand-2: #0ea5e9;
  --mx-brand-3: #0284c7;
  --mx-brand-ink: #0369a1;       /* 밝은 배경 위 글자용(대비 확보) */
  --mx-brand-50: #f0f9ff;
  --mx-brand-100: #e0f2fe;
  --mx-brand-200: #bae6fd;
  --mx-brand-300: #7dd3fc;
  --mx-on-brand: #04111f;        /* 브랜드색 버튼 위 글자 */

  /* 글자·선·면 */
  --mx-text: #334155;
  --mx-mute: #64748b;
  --mx-faint: #94a3b8;
  --mx-line: #e4e8ef;
  --mx-line-2: #eef1f6;
  --mx-soft: #f6f8fb;
  --mx-tint: #f2f9ff;
  --mx-white: #fff;

  /* 상태 */
  --mx-ok: #059669;
  --mx-warn: #d97706;
  --mx-danger: #e11d48;

  /* 반경 */
  --mx-r-sm: 12px;
  --mx-r: 20px;
  --mx-r-lg: 28px;

  /* 그림자 — 네이비 틴트. 작은 접촉 그림자 + 큰 번짐 그림자를 겹친다 */
  --mx-shadow-xs: 0 1px 2px rgba(11, 17, 32, .05);
  --mx-shadow-sm: 0 1px 2px rgba(11, 17, 32, .05), 0 8px 20px -12px rgba(11, 17, 32, .16);
  --mx-shadow: 0 2px 4px rgba(11, 17, 32, .04), 0 18px 40px -18px rgba(11, 17, 32, .22);
  --mx-shadow-lg: 0 30px 60px -28px rgba(11, 17, 32, .42);
  --mx-shadow-brand: 0 14px 28px -14px rgba(14, 165, 233, .62);

  --mx-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
             'Malgun Gothic', system-ui, sans-serif;
  --mx-mono: ui-monospace, SFMono-Regular, 'D2Coding', Menlo, monospace;

  --mx-wrap: 1200px;
  --mx-gutter: 24px;
  --mx-ease: cubic-bezier(.22, .8, .2, 1);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--mx-font); background: #f5f7fb; color: var(--mx-text); }
::selection { background: rgba(56, 189, 248, .28); }

/* 데이터가 많은 화면이라 스크롤바는 얇고 조용하게 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.tnum { font-variant-numeric: tabular-nums; }

/* 온라인 상태 점 — 살아있는 화면이라는 신호 */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 99px;
  background: currentColor; opacity: .35; animation: mx-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes mx-pulse { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.6); opacity: 0; } }

@media print { .no-print { display: none !important; } }

/* ── 레이아웃 보조 ───────────────────────────────────────── */
.mx-container { width: min(100% - var(--mx-gutter) * 2, var(--mx-wrap)); margin-inline: auto; }
.mx-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 버튼: 알약형. 브랜드(그라디언트) · 잉크 · 라인 · 고스트(어두운 배경용) ───────── */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 700 15px/1 var(--mx-font); letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--mx-ease), box-shadow .22s var(--mx-ease), background-color .2s, color .2s;
}
.mx-btn:active { transform: translateY(1px); }
.mx-btn:focus-visible { outline: 3px solid var(--mx-brand-300); outline-offset: 2px; }
.mx-btn[disabled] { opacity: .55; cursor: not-allowed; }
.mx-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.mx-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.mx-btn--lg { min-height: 56px; padding: 0 30px; font-size: 16.5px; }

.mx-btn--brand {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 38%, #0ea5e9 100%);
  color: var(--mx-on-brand); box-shadow: var(--mx-shadow-brand);
}
.mx-btn--brand:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(14, 165, 233, .78); }

.mx-btn--ink { background: var(--mx-ink); color: #fff; }
.mx-btn--ink:hover { background: var(--mx-ink-3); }

.mx-btn--line { background: #fff; color: var(--mx-ink); box-shadow: inset 0 0 0 1.5px var(--mx-line); }
.mx-btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--mx-brand-300); }

.mx-btn--ghost {
  background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mx-btn--ghost:hover { background: rgba(255, 255, 255, .18); }

/* ── 칩(알약 라벨) ─────────────────────────────────────── */
.mx-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px;
  border-radius: 999px; background: #fff; color: var(--mx-brand-ink);
  font: 700 13px/1 var(--mx-font); letter-spacing: -.005em; box-shadow: inset 0 0 0 1px var(--mx-brand-200);
}
.mx-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-brand-2); flex: none; }
.mx-chip--dark {
  background: rgba(56, 189, 248, .12); color: var(--mx-brand-300);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .28);
}
.mx-chip--dark::before { background: var(--mx-brand); }
.mx-chip--plain::before { display: none; }

/* ── 섹션 머리말 요소 ───────────────────────────────────── */
.mx-eyebrow {
  margin: 0 0 14px; font: 700 13px/1 var(--mx-font); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mx-brand-ink);
}
.mx-eyebrow--light { color: var(--mx-brand-300); }

/* 형광펜 밑줄 — 키워드 하나에만. 어두운 배경에서는 밑줄 대신 색으로 */
.mx-hl {
  background: linear-gradient(transparent 62%, rgba(56, 189, 248, .34) 62%, rgba(56, 189, 248, .34) 92%, transparent 92%);
  padding: 0 .06em; font-style: normal;
}
.mx-hl--dark { background: none; color: var(--mx-brand); padding: 0; }

/* ── 스크롤 리빌 — JS 가 <html> 에 mx-js 를 붙인 경우에만 숨긴다(JS 없으면 그냥 보인다) ──── */
.mx-js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--mx-ease), transform .7s var(--mx-ease); transition-delay: var(--mx-d, 0ms);
}
.mx-js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mx-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .mx-btn, .mx-btn--brand:hover { transition: none; transform: none; }
  .pulse-dot::after { animation: none; }
}