/* =============================================================
   Dee Editor — Design System
   CSS Custom Properties · Typography · Reset · Utilities
   ============================================================= */

/* ── 색상 팔레트 ──────────────────────────────────────────── */
:root {
  /* Brand */
  --c-primary:       #2563eb;
  --c-primary-dark:  #1d4ed8;
  --c-primary-light: #3b82f6;
  --c-primary-50:    #eff6ff;
  --c-primary-100:   #dbeafe;

  /* Dark (Navy) */
  --c-navy:          #1e3a5f;
  --c-navy-dark:     #152a45;
  --c-navy-light:    #2a4f80;

  /* Neutral */
  --c-white:         #ffffff;
  --c-gray-50:       #f8fafc;
  --c-gray-100:      #f1f5f9;
  --c-gray-200:      #e2e8f0;
  --c-gray-300:      #cbd5e1;
  --c-gray-400:      #94a3b8;
  --c-gray-500:      #64748b;
  --c-gray-600:      #475569;
  --c-gray-700:      #334155;
  --c-gray-800:      #1e293b;
  --c-gray-900:      #0f172a;

  /* Semantic */
  --c-success:       #10b981;
  --c-success-bg:    #d1fae5;
  --c-warning:       #f59e0b;
  --c-warning-bg:    #fef3c7;
  --c-error:         #ef4444;
  --c-error-bg:      #fee2e2;

  /* ── 타이포그래피 ────────────────────────────────────────── */
  --font-sans:   'Malgun Gothic', 'Apple SD Gothic Neo', '맑은 고딕',
                 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'Consolas', 'D2Coding', 'Courier New', monospace;

  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     17px;
  --text-lg:     20px;
  --text-xl:     24px;
  --text-2xl:    30px;
  --text-3xl:    38px;
  --text-4xl:    48px;
  --text-5xl:    60px;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── 간격 ────────────────────────────────────────────────── */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-8:  32px;   --sp-10: 40px;   --sp-12: 48px;
  --sp-16: 64px;   --sp-20: 80px;   --sp-24: 96px;

  /* ── 테두리 / 그림자 ─────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:   0 16px 56px rgba(0,0,0,0.18);
  --shadow-blue: 0 4px 24px rgba(37,99,235,0.28);

  /* ── 레이아웃 ────────────────────────────────────────────── */
  --container:    1200px;
  --container-md: 900px;
  --container-sm: 680px;

  /* ── 헤더 높이 ───────────────────────────────────────────── */
  --header-h: 64px;

  /* ── 전환 ────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.2s;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--c-gray-800);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

/* ── 유틸리티 ─────────────────────────────────────────────── */
.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;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container--md {
  max-width: var(--container-md);
}

.text-gradient {
  background: linear-gradient(135deg, var(--c-primary) 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge--blue   { background: var(--c-primary-100); color: var(--c-primary-dark); }
.badge--green  { background: var(--c-success-bg);  color: #047857; }
.badge--amber  { background: var(--c-warning-bg);  color: #92400e; }
.badge--navy   { background: rgba(30,58,95,0.1);   color: var(--c-navy); }
.badge--new    { background: linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; }

/* ── 포커스 접근성 ────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 2px;
}