/* ════════════════════════════════════════════════════════════
   NPT Design Tokens — neopwr.co.kr 전사 사이트
   ════════════════════════════════════════════════════════════
   - X-NEO 최신 토큰 시스템 차용 (2026-05)
   - 컬러: near-black (#0C0E14) + 프리미엄 블루 (#0068B3) + 딥블루 (#1A3554)
   - 그룹사 일관성: X-NEO·SkyLab과 동일 디자인 시스템
   - 사용:
       <link rel="stylesheet" href="/css/npt-tokens.css" />
       <link rel="stylesheet" href="/css/style.css" />
   ════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1. Brand Colors ───────────────────────────────── */
  --c-brand:        #0C0E14;       /* near-black (블루기 도는 블랙) */
  --c-brand-2:      #1A3554;       /* 그라데이션 보조 (deep blue) */
  --c-brand-dark:   #06070C;
  --c-deep-blue:    #1A3554;
  --c-accent:       #0068B3;       /* 프리미엄 블루 (CTA·링크) */
  --c-accent-hover: #00568F;       /* hover 시 진해짐 */

  /* ─── 2. Surface ─────────────────────────────────────── */
  --c-bg:           #FFFFFF;
  --c-bg-alt:       #F5F7FA;
  --c-bg-soft:      #F0F3F8;
  --c-bg-dark:      #0C0E14;       /* 푸터 / 히어로 배경 */
  --c-bg-card:      #FFFFFF;

  /* ─── 3. Text ───────────────────────────────────────── */
  --c-text:         #1A1A1A;
  --c-text-muted:   #4A4A4A;
  --c-text-light:   #6E7480;
  --c-text-on-brand: #FFFFFF;
  --c-text-on-dark:  #E8ECF1;

  /* ─── 4. Border ─────────────────────────────────────── */
  --c-border:        #E5E8ED;
  --c-border-strong: #C8CCD2;
  --c-border-focus:  var(--c-accent);

  /* ─── 5. Semantic ───────────────────────────────────── */
  --c-success: #16A34A;
  --c-info:    #0068B3;
  --c-warning: #F59E0B;
  --c-danger:  #DC2626;

  /* ─── 6. Spacing (4px scale) ────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ─── 7. Typography ─────────────────────────────────── */
  --font-sans:
    'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
  --font-display:
    'Pretendard', 'Manrope', 'Inter', sans-serif;
  --font-mono:
    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-2xs:    11px;
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-base:   15px;
  --fs-md:     17px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-display: 56px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ─── 8. Border Radius ──────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── 9. Shadows ────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(12, 14, 20, 0.05);
  --shadow:      0 2px 8px rgba(12, 14, 20, 0.08);
  --shadow-md:   0 4px 16px rgba(12, 14, 20, 0.10);
  --shadow-lg:   0 8px 32px rgba(12, 14, 20, 0.12);
  --shadow-xl:   0 16px 48px rgba(12, 14, 20, 0.16);
  --shadow-glow: 0 0 24px rgba(0, 104, 179, 0.18);

  /* ─── 10. Layout ────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  24px;
  --header-h:       72px;
  --bottom-tabs-h:  56px;

  /* ─── 11. Transition ────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition:       0.25s ease;
  --transition-slow:  0.4s ease;
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── 12. Z-index ───────────────────────────────────── */
  --z-base:        0;
  --z-raised:      1;
  --z-dropdown:    10;
  --z-sticky:      20;
  --z-header:      100;
  --z-mega-menu:   110;
  --z-bottom-tabs: 90;
  --z-fab:         200;
  --z-overlay:     500;
  --z-modal:       600;
  --z-toast:       700;
  --z-tooltip:     800;

  /* ─── 13. Gradients ─────────────────────────────────── */
  --gradient-brand:
    linear-gradient(160deg, #0C0E14 0%, #1A3554 100%);
  --gradient-hero:
    linear-gradient(180deg, rgba(12,14,20,0.92) 0%, rgba(26,53,84,0.78) 100%);
  --gradient-accent-soft:
    linear-gradient(135deg, rgba(0,104,179,0.08) 0%, rgba(26,53,84,0.04) 100%);
}

/* ─────────────────────────────────────────────────────
   Dark Mode
   ⚠ 자동(prefers-color-scheme) 다크는 비활성화됨.
   이유: 다수 제목이 inline color:var(--c-brand)(다크값)이라 다크 배경에서
   대비 부족(안 보임). 토큰(--c-heading 등) 리팩터 후 명시 토글로 재도입 예정.
   아래 [data-theme="dark"] 블록은 향후 토글용으로 보존(현재 미사용).
   ─────────────────────────────────────────────────── */

[data-theme="dark"] {
  --c-bg:        #0C0E14;
  --c-bg-alt:    #15171F;
  --c-bg-soft:   #1F222B;
  --c-bg-card:   #15171F;
  --c-text:      #F0F3F8;
  --c-text-muted: #A8AEB7;
  --c-text-light: #6E7480;
  --c-border:        #2A2D36;
  --c-border-strong: #3A3F4A;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow:      0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
}

/* ─────────────────────────────────────────────────────
   반응형 토큰
   ─────────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --fs-display: 64px;
    --fs-3xl:     52px;
  }
}

@media (min-width: 1280px) {
  :root {
    --fs-display: 72px;
    --container-pad: 32px;
  }
}