/* =========================================================
   SnapReview Design System v2.0 — Colors & Typography Tokens
   Source: Snap Design System Guide (2026-05-11 최종)
   P1: Caption/Label 분리, radius 확장
   P2: Heading weight 상향, KPI 토큰 추가
   P3: Input state matrix, Modal/Drawer/Toast, Table 규격
   Font: Pretendard Variable (jsdelivr CDN)
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ---------------------------------------------------------
   COLOR TOKENS
   --------------------------------------------------------- */
:root {

  /* --- Base --- */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* --- Gray Scale --- */
  --color-gray-50:  #FAFAFA;   /* 페이지 배경 */
  --color-gray-100: #F5F5F5;   /* 카드 배경 */
  --color-gray-200: #E5E5E5;   /* 구분선, Tertiary 버튼 border */
  --color-gray-300: #D7D7D9;   /* 비활성 border */
  --color-gray-400: #C2C2C4;   /* placeholder */
  --color-gray-500: #AAAAAD;   /* 비활성 텍스트 */
  --color-gray-600: #919194;   /* 보조 텍스트 */
  --color-gray-700: #606061;   /* 서브 텍스트 */
  --color-gray-800: #444444;   /* 본문 텍스트 기본 */
  --color-gray-900: #262626;   /* 강조 텍스트, 타이틀 ← P1: #2E2E2E → #262626 */

  /* --- Primary Blue --- */
  /* ⚠️  Primary/500은 아이콘·링크·선택 인디케이터 전용 (흰 텍스트 대비 약 2.8:1 → WCAG AA 미달) */
  /* ✅  Filled 버튼 배경은 반드시 Primary/700 (#1664A9, 대비 5.8:1) 사용 */
  --color-primary-50:  #F7FBFF;
  --color-primary-100: #EBF5FF;
  --color-primary-500: #2699FB;   /* 아이콘·링크·인디케이터 전용 */
  --color-primary-600: #1F7ED4;   /* 버튼 hover */
  --color-primary-700: #1664A9;   /* Filled CTA 버튼 기본 — WCAG AA 준수 */

  /* --- Secondary Navy --- */
  --color-secondary-100: #E9EEF5;
  --color-secondary-500: #465770;
  --color-secondary-600: #3D4B61;
  --color-secondary-700: #333E4F;

  /* --- Danger / Error --- */
  /* Danger/500: 에러 아이콘·텍스트·border 전용 (배경 없는 용도) */
  /* Danger/600: Filled Danger 버튼 배경 전용 — WCAG AA 준수 */
  --color-danger-50:  #FFF5F5;
  --color-danger-500: #FF4F4F;   /* ← P1: #FF6969 → #FF4F4F */
  --color-danger-600: #D42B2B;   /* Filled 버튼 전용 */

  /* --- Progress / Success --- */
  /* (구 Complete → Progress로 변경) */
  --color-progress-50:  #F0FAF5;
  --color-progress-500: #18B55F;  /* ← 구 Complete/500 #47A3F3 → #18B55F */

  /* --- Orange / Warning --- */
  --color-orange-100: #FFF2EB;
  --color-orange-500: #FF8139;

  /* --- Yellow --- */
  --color-yellow-100: #FFF5E5;
  --color-yellow-500: #FFB02E;

  /* --- Green --- */
  --color-green-100: #F4FBE9;
  --color-green-500: #82C01C;

  /* --- Purple --- */
  --color-purple-100: #F6EDFC;   /* ← #F1E4FB → #F6EDFC */
  --color-purple-500: #A553E5;

  /* --- Pink (신규) --- */
  --color-pink-100: #FFF0F7;
  --color-pink-500: #E3529D;

  /* --- Teal --- */
  --color-teal-100: #EAFCF9;
  --color-teal-500: #33C4AC;

  /* --- Complete (하위 호환, deprecated → progress 사용 권장) --- */
  --color-complete-50:  #F7FBFF;
  --color-complete-500: #47A3F3;

  /* ---------------------------------------------------------
     SEMANTIC / ROLE TOKENS
     --------------------------------------------------------- */

  /* Text */
  --text-primary:      var(--color-gray-900);   /* #262626 */
  --text-secondary:    var(--color-gray-800);   /* #444444 */
  --text-tertiary:     var(--color-gray-700);   /* #606061 */
  --text-subtle:       var(--color-gray-600);   /* #919194 */
  --text-inactive:     var(--color-gray-500);   /* #AAAAAD */
  --text-disabled:     var(--color-gray-400);   /* #C2C2C4 placeholder */
  --text-inverse:      var(--color-white);
  --text-brand:        var(--color-primary-500); /* 링크·아이콘 전용 */
  --text-danger:       var(--color-danger-500);
  --text-success:      var(--color-progress-500);

  /* Backgrounds */
  --bg-page:           var(--color-gray-50);    /* #FAFAFA */
  --bg-surface:        var(--color-white);
  --bg-subtle:         var(--color-gray-100);   /* #F5F5F5 */
  --bg-brand-tint:     var(--color-primary-50); /* #F7FBFF */
  --bg-brand:          var(--color-primary-700); /* Filled 버튼 배경 */
  --bg-danger:         var(--color-danger-50);
  --bg-success:        var(--color-progress-50);

  /* Borders */
  --border-default:    var(--color-gray-200);
  --border-strong:     var(--color-gray-300);
  --border-brand:      var(--color-primary-500);
  --border-danger:     var(--color-danger-500);

  /* Interactive */
  --interactive-default:   var(--color-primary-700);  /* Filled 버튼 기본 */
  --interactive-hover:     var(--color-primary-600);
  --interactive-pressed:   #124F86;
  --interactive-disabled:  var(--color-gray-200);
  --interactive-indicator: var(--color-primary-500);  /* 아이콘·링크·인디케이터 */

  /* Semantic states */
  --state-danger-bg:     var(--color-danger-50);
  --state-danger-fg:     var(--color-danger-500);
  --state-danger-filled: var(--color-danger-600);    /* Filled Danger 버튼 배경 */
  --state-success-bg:    var(--color-progress-50);
  --state-success-fg:    var(--color-progress-500);
  --state-warning-bg:    var(--color-orange-100);
  --state-warning-fg:    var(--color-orange-500);

  /* ---------------------------------------------------------
     SPACING TOKENS
     --------------------------------------------------------- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  13px;  /* 버튼 paddingY */
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;

  /* ---------------------------------------------------------
     BORDER RADIUS TOKENS  (P1 확장)
     --------------------------------------------------------- */
  --radius-0:    0px;
  --radius-1:    4px;    /* Badge, Checkbox */
  --radius-2:    8px;    /* Button, Input, Card */
  --radius-3:    12px;   /* Modal, Drawer, Toast */
  --radius-4:    16px;   /* 강조 컨테이너 */
  --radius-5:    24px;   /* 대형 배너 */
  --radius-full: 999px;  /* Pill */

  /* ---------------------------------------------------------
     SHADOW / ELEVATION
     --------------------------------------------------------- */
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.05);   /* Elevation/1 */
  --shadow-md: 0px 2px 6px 0px rgba(0,0,0,0.08);   /* Elevation/2 — 카드 */
  --shadow-xl: 0px 8px 24px 0px rgba(0,0,0,0.12);  /* Elevation/4 — 모달·드로어·Toast */

  /* ---------------------------------------------------------
     TYPOGRAPHY TOKENS
     --------------------------------------------------------- */
  --font-family-base:    'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Inter', var(--font-family-base);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-default: -0.002em;  /* -0.2% 전 타입 공통 */
  --letter-spacing-tight:   -0.030em;  /* 대형 헤딩 전용 */
}

/* ---------------------------------------------------------
   HEADING  (P2: weight 상향)
   --------------------------------------------------------- */

.heading-28 {
  font-family: var(--font-family-base);
  font-size: 28px;
  font-weight: var(--font-weight-bold);      /* ← 700 (구 500) */
  line-height: 150%;
  letter-spacing: var(--letter-spacing-default);
  color: var(--text-primary);
}

.heading-24 {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);  /* ← 600 (구 500) */
  line-height: 150%;
  letter-spacing: var(--letter-spacing-default);
  color: var(--text-primary);
}

.heading-20 {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);  /* ← 600 (구 500) */
  line-height: 140%;
  letter-spacing: var(--letter-spacing-default);
  color: var(--text-primary);
}

/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */
.title-24-semibold { font-family: var(--font-family-base); font-size: 24px; font-weight: 600; line-height: 150%; letter-spacing: var(--letter-spacing-default); }
.title-24-medium   { font-family: var(--font-family-base); font-size: 24px; font-weight: 500; line-height: 150%; letter-spacing: var(--letter-spacing-default); }
.title-18-semibold { font-family: var(--font-family-base); font-size: 18px; font-weight: 600; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-18-medium   { font-family: var(--font-family-base); font-size: 18px; font-weight: 500; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-15-semibold { font-family: var(--font-family-base); font-size: 15px; font-weight: 600; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-15-medium   { font-family: var(--font-family-base); font-size: 15px; font-weight: 500; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-14-semibold { font-family: var(--font-family-base); font-size: 14px; font-weight: 600; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-14-medium   { font-family: var(--font-family-base); font-size: 14px; font-weight: 500; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.title-13-medium   { font-family: var(--font-family-base); font-size: 13px; font-weight: 500; line-height: 140%; letter-spacing: var(--letter-spacing-default); }

/* ---------------------------------------------------------
   BODY
   --------------------------------------------------------- */
.body-18-medium  { font-family: var(--font-family-base); font-size: 18px; font-weight: 500; line-height: 150%; letter-spacing: var(--letter-spacing-default); }
.body-18-regular { font-family: var(--font-family-base); font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: var(--letter-spacing-default); }
.body-15-medium  { font-family: var(--font-family-base); font-size: 15px; font-weight: 500; line-height: 148%; letter-spacing: var(--letter-spacing-default); }
.body-15-regular { font-family: var(--font-family-base); font-size: 15px; font-weight: 400; line-height: 148%; letter-spacing: var(--letter-spacing-default); }
.body-14-medium  { font-family: var(--font-family-base); font-size: 14px; font-weight: 500; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.body-14-regular { font-family: var(--font-family-base); font-size: 14px; font-weight: 400; line-height: 146%; letter-spacing: var(--letter-spacing-default); }
.body-13-medium  { font-family: var(--font-family-base); font-size: 13px; font-weight: 500; line-height: 140%; letter-spacing: var(--letter-spacing-default); }
.body-13-regular { font-family: var(--font-family-base); font-size: 13px; font-weight: 400; line-height: 140%; letter-spacing: var(--letter-spacing-default); }

/* ---------------------------------------------------------
   LABEL  (P1: 항상 Medium(500) 고정)
   --------------------------------------------------------- */
.label-13 { font-family: var(--font-family-base); font-size: 13px; font-weight: 500; line-height: 140%; letter-spacing: var(--letter-spacing-default); }
.label-12 { font-family: var(--font-family-base); font-size: 12px; font-weight: 500; line-height: 130%; letter-spacing: var(--letter-spacing-default); }
.label-11 { font-family: var(--font-family-base); font-size: 11px; font-weight: 500; line-height: 124%; letter-spacing: var(--letter-spacing-default); }

/* ---------------------------------------------------------
   CAPTION  (P1: Medium·Regular 모두 허용)
   --------------------------------------------------------- */
.caption-12-medium  { font-family: var(--font-family-base); font-size: 12px; font-weight: 500; line-height: 130%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }
.caption-12-regular { font-family: var(--font-family-base); font-size: 12px; font-weight: 400; line-height: 130%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }
.caption-11-medium  { font-family: var(--font-family-base); font-size: 11px; font-weight: 500; line-height: 124%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }
.caption-11-regular { font-family: var(--font-family-base); font-size: 11px; font-weight: 400; line-height: 124%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }

/* 하위 호환 (deprecated — caption-12-medium 사용 권장) */
.caption-12 { font-family: var(--font-family-base); font-size: 12px; font-weight: 500; line-height: 130%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }
.caption-11 { font-family: var(--font-family-base); font-size: 11px; font-weight: 500; line-height: 124%; letter-spacing: var(--letter-spacing-default); color: var(--text-subtle); }

/* ---------------------------------------------------------
   KPI / DISPLAY  (P2 추가)
   --------------------------------------------------------- */
.kpi-40 { font-family: var(--font-family-base); font-size: 40px; font-weight: 700; line-height: 120%; }
.kpi-32 { font-family: var(--font-family-base); font-size: 32px; font-weight: 700; line-height: 120%; }
.kpi-28 { font-family: var(--font-family-base); font-size: 28px; font-weight: 700; line-height: 130%; }

/* ---------------------------------------------------------
   ADMIN EXTENSION  (어드민 전용 — 일반 서비스 UI 사용 금지)
   --------------------------------------------------------- */
.admin-title-15-bold { font-family: var(--font-family-base); font-size: 15px; font-weight: 700; letter-spacing: -0.002em; }
.admin-title-14-bold { font-family: var(--font-family-base); font-size: 14px; font-weight: 700; letter-spacing: -0.002em; }

/* ---------------------------------------------------------
   BASE RESET + DEFAULTS
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 146%;
  color: var(--text-secondary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--letter-spacing-default);
  text-wrap: pretty;
}

/* Focus visible 공통 규격 */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2699FB;
}