/*
 * FACT NETWORKS CORPORATE RENEWAL
 * Build: 2.0.0-stage01
 * Stage 01: Corporate foundation layer
 *
 * 기존 site.css를 보존하고 본 파일을 마지막에 연결하여
 * 이후 리뉴얼 차수의 디자인 토큰과 공통 규칙을 독립 관리한다.
 */

:root {
  --fact-canvas: #070a0f;
  --fact-canvas-raised: #0a0e14;
  --fact-surface: #0e141c;
  --fact-surface-strong: #121a24;
  --fact-border: rgba(185, 199, 216, 0.18);
  --fact-border-strong: rgba(185, 199, 216, 0.3);
  --fact-text: #f2f5f8;
  --fact-muted: #97a3b0;
  --fact-accent: #4d83d8;
  --fact-accent-soft: #79a8ed;
  --fact-radius-sm: 3px;
  --fact-radius-md: 6px;
  --fact-content-width: 1440px;

  --bg: var(--fact-canvas);
  --panel: rgba(14, 20, 28, 0.96);
  --line: var(--fact-border);
  --text: var(--fact-text);
  --muted: var(--fact-muted);
  --blue: var(--fact-accent);
  --cyan: var(--fact-accent-soft);
  --vio: var(--fact-accent);
}

html {
  color-scheme: dark;
  background: var(--fact-canvas);
}

body {
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(26, 38, 54, 0.24) 0, transparent 360px),
    var(--fact-canvas);
  color: var(--fact-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 72%);
}

.shell {
  max-width: none;
  min-height: 100vh;
}

.site-header {
  height: 82px;
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
  border-color: var(--fact-border);
  background: rgba(7, 10, 15, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

.site-header nav {
  gap: clamp(16px, 1.65vw, 28px);
}

.site-header nav a {
  color: #aab4bf;
  font-weight: 650;
  letter-spacing: -0.01em;
}

main {
  width: min(100%, var(--fact-content-width));
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
}

.feature,
.panel,
.metrics,
.stack-cards article,
.cards article,
.dashboard,
.battle,
.map,
.form input,
.form textarea,
.slots i {
  border-color: var(--fact-border);
  border-radius: var(--fact-radius-md);
}

.feature,
.panel,
.stack-cards article,
.cards article {
  background: linear-gradient(145deg, rgba(18, 26, 36, 0.97), rgba(10, 15, 22, 0.97));
  box-shadow: none;
}

.cards article:hover {
  border-color: var(--fact-border-strong);
  transform: translateY(-2px);
}

.metrics {
  background: rgba(11, 16, 23, 0.96);
}

.metrics article {
  border-color: var(--fact-border);
}

.metrics strong {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  color: var(--fact-accent-soft);
  letter-spacing: 0.2em;
}

.btn {
  border-radius: var(--fact-radius-sm);
  box-shadow: none;
}

.btn.primary,
.primary {
  background: #315f9f;
  box-shadow: none;
}

.orb i {
  opacity: 0.42;
}

.sphere {
  box-shadow: 0 0 52px rgba(77, 131, 216, 0.32);
}

footer {
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
  border-color: var(--fact-border);
  background: #05070a;
}

.reveal {
  transition-duration: 0.55s;
}

@media (max-width: 1000px) {
  .mobile-nav {
    top: 82px;
    background: rgba(7, 10, 15, 0.98);
    border-bottom: 1px solid var(--fact-border);
  }
}

@media (max-width: 720px) {
  main,
  .site-header,
  footer {
    padding-right: 18px;
    padding-left: 18px;
  }
}