/* ==========================================================================
   슈퍼로컬 프로젝트 — Design Tokens
   유일한 디자인 단일 진입점. 향후 디자인 변경은 이 파일만 수정.
   ========================================================================== */

:root {
  /* ----- Primary (Yellow) ----- */
  --color-primary-100: #FFFCE5;
  --color-primary-200: #FFF6B8;
  --color-primary-300: #FFEC70;
  --color-primary-400: #FFE135;
  --color-primary-500: #FFD400;
  --color-primary-600: #E6BE00;

  /* ----- Secondary (Deep Purple) ----- */
  --color-secondary-100: #F8F4FB;
  --color-secondary-200: #EFE5F5;
  --color-secondary-300: #D7C3E5;
  --color-secondary-500: #7A4FCF;
  --color-secondary-600: #5A1F94;
  --color-secondary-700: #3D2785;
  --color-secondary-800: #2D1A6B;

  /* ----- Neutral ----- */
  --color-text: #1A1A2E;
  --color-text-muted: #5C5C70;
  --color-text-soft: #9AA0B0;
  --color-text-inverse: #FFFFFF;

  --color-border: #E5E7EB;
  --color-border-strong: #C7C9D1;

  --color-bg: #FFFFFF;
  --color-bg-soft: #FAFAFB;
  --color-bg-muted: #F2F3F5;
  --color-bg-dark: #1A1A2E;

  /* ----- Semantic ----- */
  --color-success: #1FAE6E;
  --color-success-bg: #E6F5EC;
  --color-warning: #FFA800;
  --color-warning-bg: #FFF6E1;
  --color-danger: #E53935;
  --color-danger-bg: #FCEAEA;
  --color-info: #2680EB;
  --color-info-bg: #E8F1FB;

  /* ----- Category Accents ----- */
  --accent-labor: #3D2785;
  --accent-environment: #1FAE6E;
  --accent-care: #E5446D;
  --accent-region: #0066CC;
  --accent-education: #FF7A00;
  --accent-youth: #7A4FCF;
  --accent-digital: #0FBFA0;
  --accent-default: #5C5C70;

  /* ----- Alpha Variants (rgba 직접 사용 금지, 이 변수만 사용) ----- */
  --color-secondary-700-a25: rgba(61, 39, 133, 0.25);
  --color-secondary-700-a15: rgba(61, 39, 133, 0.15);
  --color-secondary-700-a08: rgba(61, 39, 133, 0.08);
  --color-text-inverse-a90: rgba(255, 255, 255, 0.9);
  --color-text-inverse-a78: rgba(255, 255, 255, 0.78);
  --color-text-inverse-a50: rgba(255, 255, 255, 0.5);
  --color-text-inverse-a30: rgba(255, 255, 255, 0.3);
  --color-text-inverse-a15: rgba(255, 255, 255, 0.15);
  --color-text-inverse-a10: rgba(255, 255, 255, 0.1);

  /* ----- Illustration Tokens (SVG 인라인 스타일에서 var() 사용) -----
   * SVG 내부에서는 fill="..." 직접 hex 대신 style="fill: var(--ill-*)" 사용.
   * 또는 SVG 안에 <style>.cls{ fill: var(--ill-*) }</style> 패턴.
   */
  --ill-yellow: #FFD400;
  --ill-yellow-light: #FFE135;
  --ill-purple: #3D2785;
  --ill-purple-deep: #2D1A6B;
  --ill-white: #FFFFFF;

  /* ----- Typography -----
   * 제목/본문 분리 서체
   * - 제목(--font-display): Pretendard Variable. 모던하고 또렷한 인상.
   * - 본문(--font-sans): Noto Sans KR. 한국어 본문 가독성 우수.
   */
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --font-display: "Pretendard Variable", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, monospace;

  --text-display: clamp(2.4rem, 5vw, 3.5rem);
  --text-h1: clamp(2rem, 4vw, 2.5rem);
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-tag: 0.75rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --leading-loose: 2;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

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

  /* ----- Spacing (4px base) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----- Container ----- */
  --container-xl: 1280px;
  --container-lg: 1120px;
  --container-md: 880px;
  --container-sm: 640px;

  /* ----- Radius ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----- Border ----- */
  --border-thin: 1px;
  --border-strong: 2px;

  /* ----- Shadow (사용 최소화) ----- */
  --shadow-soft: 0 2px 8px rgba(26, 26, 46, 0.04);
  --shadow-focus: 0 0 0 3px rgba(255, 212, 0, 0.35);

  /* ----- Transition ----- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  /* ----- Z-index ----- */
  --z-header: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ----- Breakpoints (참고용) ----- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ----- Brand Logo (사이트 표시 시 세로 max-height. 가로는 비율 자동) -----
   * 정책:
   *   - 이미지(siteSettings/branding.logoLightUrl)가 있으면 img로 표시 (세로 max 토큰 적용)
   *   - 없으면 텍스트(siteSettings/branding.serviceName) 사용
   *   - 권장 업로드: 가로 200~400px, 세로 60~100px, 투명 PNG 또는 SVG
   */
  --brand-logo-max-h-public: 60px;   /* 공개 헤더 (40 → 60, +50%) */
  --brand-logo-max-h-sidebar: 48px;  /* admin/learn/manager 사이드바 (32 → 48) */
  --brand-logo-max-h-auth: 84px;     /* signup/login/invite (56 → 84) */
  --brand-logo-max-h-footer: 48px;   /* 푸터 (32 → 48) */

  /* ----- Avatar (프로필 이미지 / 이니셜) -----
   * 정책: 원형 + 이미지면 object-fit:cover, 이미지 없으면 첫글자 + 배경색.
   * 두 가지 클래스 패턴 병행:
   *   - .avatar (신규, 데이터 속성 기반)
   *   - .avatar-mini (기존 시안 호환. 동일 사이즈로 매핑)
   */
  --avatar-size-xs: 28px;
  --avatar-size-sm: 36px;
  --avatar-size-md: 40px;   /* 기본 (테이블 행, 사이드바 등) */
  --avatar-size-lg: 48px;   /* 사이드바 사용자, 멤버 행 */
  --avatar-size-xl: 72px;   /* 팀 페이지 멤버 카드 */
  --avatar-size-2xl: 96px;  /* 마이 프로필 */
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select, button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}