/*
 * design-system.css — ai-kit.star-t.io 웹 디자인 시스템 SSOT v1 (2026-07-03)
 * 기준 페이지: /enterprise. 모든 신규·개편 페이지는 이 토큰을 사용한다.
 * 사용: <link rel="stylesheet" href="/assets/design-system.css" />
 * 문서: docs/design/DESIGN_SYSTEM_KO.md
 */

:root {
  /* 색 — 팔레트는 이 6개가 전부. 새 색 추가 금지 */
  --ds-blue: #1456f0;        /* 브랜드/프라이머리 (구 #2563eb 금지) */
  --ds-blue-hover: #0f49d8;
  --ds-ink: #0F172A;         /* 본문 텍스트 */
  --ds-muted: #64748B;       /* 보조 텍스트 */
  --ds-line: #DCE6F3;        /* 경계선 */
  --ds-bg-gray: #F8FAFC;     /* 회색 섹션/필 배경 */

  /* 상태색 */
  --ds-ok: #16a34a; --ds-ok-bg: #F0FDF4; --ds-ok-line: #BBF7D0;
  --ds-warn: #92400e; --ds-warn-bg: #FFFBEB; --ds-warn-line: #FDE68A;
  --ds-danger: #dc2626;

  /* 형태 */
  --ds-radius: 18px;         /* 카드 */
  --ds-radius-btn: 10px;     /* 버튼 */
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .07);
  --ds-shadow-md: 0 14px 36px rgba(20, 86, 240, .10);
  --ds-shadow-btn: 0 14px 34px rgba(20, 86, 240, .22);

  /* 타이포 */
  --ds-font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --ds-h1: clamp(34px, 5vw, 60px);
  --ds-h2: clamp(24px, 3vw, 38px);
  --ds-max: 1120px;

  /* 히어로 그라디언트 */
  --ds-hero-grad: linear-gradient(180deg, #eef4ff 0%, #f8fbff 58%, #fff 100%);
}

/* ── 컴포넌트 (ds- 네임스페이스: 신규 페이지용) ── */
.ds-body { margin: 0; font-family: var(--ds-font); background: #fff; color: var(--ds-ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ds-wrap { width: min(var(--ds-max), 92vw); margin: 0 auto; }

.ds-hero-band { background: var(--ds-hero-grad); }
.ds-hero { padding: 84px 0 60px; text-align: center; }
.ds-label { display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-blue); }
.ds-h1 { font-size: var(--ds-h1); line-height: 1.08; letter-spacing: -.045em; font-weight: 900; margin: 16px 0 14px; }
.ds-h1 .accent { color: var(--ds-blue); }
.ds-lead { font-size: clamp(15px, 1.5vw, 17px); color: var(--ds-muted); max-width: 680px; margin: 0 auto; line-height: 1.65; }

.ds-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-btn); padding: 11px 18px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink); transition: all .18s; cursor: pointer; }
.ds-btn:hover { border-color: var(--ds-blue); color: var(--ds-blue); }
.ds-btn-primary { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; box-shadow: var(--ds-shadow-btn); }
.ds-btn-primary:hover { background: var(--ds-blue-hover); color: #fff; }

.ds-card { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 24px; box-shadow: var(--ds-shadow-sm); }
.ds-pill { display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--ds-bg-gray); color: var(--ds-muted); border: 1px solid var(--ds-line); }
.ds-tag { display: inline-flex; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(20, 86, 240, .08); color: var(--ds-blue); }

/* 폼 */
.ds-input, .ds-select, .ds-textarea { width: 100%; font-family: var(--ds-font); font-size: 15px; color: var(--ds-ink); background: #fff; border: 1px solid var(--ds-line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--ds-blue); box-shadow: 0 0 0 3px rgba(20, 86, 240, .12); }
.ds-field-label { display: block; font-weight: 800; font-size: 14px; margin: 14px 0 7px; color: var(--ds-ink); }