/* ═══ 카비서 디자인 토큰 v1 (2026-08-31) ═══
   구매 디자인 시스템 가이드 기반. 새 코드는 반드시 이 변수만 사용.
   규칙: 간격 4배수 / 텍스트 회색 4계층 / 라인·배경 각 2~3종 / 상태색 3종 */

@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* 텍스트 4계층 (#999는 비활성 전용) */
  --tx-1: #111111;
  --tx-2: #505050;
  --tx-3: #767676;
  --tx-disabled: #999999;
  /* 배경 2종 */
  --bg-soft: #F7F7FB;
  --bg-mute: #F1F1F5;
  /* 라인 3종 (버튼·인풋·셀렉트는 --line) */
  --line: #E5E5EC;
  --line-soft: #F1F1F5;
  --line-strong: #111111;
  /* 상태 3종 */
  --c-err: #DC0000;
  --c-ok: #04B014;
  --c-warn: #FFAA00;   /* 텍스트 사용 금지(저대비) — 아이콘/뱃지 배경용 */
  /* 브랜드 */
  --brand: #4a6cf7;
  /* 간격 스케일 (4배수) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
}

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  color: var(--tx-2);
  -webkit-font-smoothing: antialiased;
}

/* ═══ 2단계: 컴포넌트 (tokens.css 로드 페이지 한정) ═══ */

/* 버튼 — 가이드: 면/라인/텍스트 3스타일, 라운드 6, 높이 4배수 */
.btn { border-radius: 6px; }
.btn-primary { background: var(--brand); }
.btn-danger {          /* 파괴 액션은 면(빨강 배경) 대신 라인 스타일 — 시각 강도 조절 */
    background: #fff; color: var(--c-err); border: 1px solid #F5B5B5;
}
.btn-xs { min-height: 28px; padding: 4px 10px; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }

/* 빈 화면 — 가이드: 아이콘 + 제목 + 설명 (+CTA) */
.empty-state { text-align: center; padding: 48px 20px; color: var(--tx-3); }
.empty-state .es-icon { display: block; font-size: 40px; line-height: 1; margin-bottom: 12px; }
.empty-state .es-title { display: block; font-size: 16px; font-weight: 600; color: var(--tx-2); margin-bottom: 4px; }
.empty-state p { font-size: 13.5px; margin: 0 0 12px; }

/* 인풋·셀렉트 — 가이드: 라인 #E5E5EC(버튼과 통일), 포커스 상태 정의 */
input[type="text"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="email"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}