@charset "utf-8";

/* ========================================
   base
======================================== */
html {
  font-size: 62.5%;
}

:root {
  /* ========================================
     color
  ======================================== */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-900: #111111;
  --color-gray-800: #222222;
  --color-gray-700: #333333;
  --color-gray-600: #555555;
  --color-gray-500: #777777;
  --color-gray-400: #999999;
  --color-gray-300: #cccccc;
  --color-gray-200: #e5e5e5;
  --color-gray-100: #f5f5f5;

  --color-primary: #0d1c2dcc;
  --color-primary-50: #0D1C2D80;
  --color-primary-solid: #0d1c2d;
  --color-secondary: #4b5563;
  --color-point: #4568FF;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #f59e0b;

  --text-color-primary: var(--color-gray-900);
  --text-color-secondary: var(--color-gray-600);
  --text-color-muted: var(--color-gray-500);
  --text-color-inverse: var(--color-white);

  --bg-color-default: var(--color-white);
  --bg-color-muted: var(--color-gray-100);
  --border-color-default: var(--color-gray-200);

  /* ========================================
     font-family
  ======================================== */
  --font-family-base: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-family-en: 'Inter', 'Pretendard', sans-serif;

  /* ========================================
     font-weight
  ======================================== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ========================================
     line-height
  ======================================== */
  --lh-100: 1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-160: 1.6;
  --lh-170: 1.7;

  /* ========================================
     letter-spacing
  ======================================== */
  --ls-tight: -0.04em;
  --ls-normal: -0.02em;
  --ls-wide: 0;

  /* ========================================
     font-size fixed
  ======================================== */
  --fs-12: 1.2rem;
  --fs-14: 1.4rem;
  --fs-16: 1.6rem;
  --fs-18: 1.8rem;
  --fs-20: 2rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-32: 3.2rem;

  /* ========================================
     font-size responsive
  ======================================== */
  --rfs-12: clamp(1.2rem, 1.18rem + 0.08vw, 1.2rem);
  --rfs-14: clamp(1.3rem, 1.2rem + 0.2vw, 1.4rem);
  --rfs-16: clamp(1.4rem, 1.28rem + 0.3vw, 1.6rem);
  --rfs-18: clamp(1.5rem, 1.35rem + 0.45vw, 1.8rem);
  --rfs-20: clamp(1.6rem, 1.4rem + 0.7vw, 2rem);
  --rfs-22: clamp(1.8rem, 1.5rem + 0.8vw, 2.2rem);
  --rfs-24: clamp(2rem, 1.7rem + 0.9vw, 2.4rem);
  --rfs-32: clamp(2.4rem, 1.9rem + 1.8vw, 3.2rem);

  /* ========================================
     semantic text
  ======================================== */
  --text-caption: var(--fs-12);
  --text-small: var(--fs-14);
  --text-body: var(--fs-16);
  --text-body-lg: var(--fs-18);
  --text-subtitle: var(--fs-20);
  --text-subtitle-lg: var(--fs-22);
  --text-title: var(--fs-24);
  --text-display: var(--fs-32);

  --text-caption-r: var(--rfs-12);
  --text-small-r: var(--rfs-14);
  --text-body-r: var(--rfs-16);
  --text-body-lg-r: var(--rfs-18);
  --text-subtitle-r: var(--rfs-20);
  --text-subtitle-lg-r: var(--rfs-22);
  --text-title-r: var(--rfs-24);
  --text-display-r: var(--rfs-32);

  /* ========================================
     border-radius
  ======================================== */
  --radius-6: 0.6rem;
  --radius-8: 0.8rem;
  --radius-12: 1.2rem;
  --radius-16: 1.6rem;
  --radius-32: 3.2rem;

  --radius-xs: var(--radius-6);
  --radius-sm: var(--radius-8);
  --radius-md: var(--radius-12);
  --radius-lg: var(--radius-16);
  --radius-pill: var(--radius-32);

  /* ========================================
     spacing fixed
  ======================================== */
  --space-4: 0.4rem;
  --space-6: 0.6rem;
  --space-8: 0.8rem;
  --space-10: 1rem;
  --space-12: 1.2rem;
  --space-14: 1.4rem;
  --space-16: 1.6rem;
  --space-18: 1.8rem;
  --space-20: 2rem;
  --space-22: 2.2rem;
  --space-24: 2.4rem;
  --space-28: 2.8rem;
  --space-32: 3.2rem;
  --space-40: 4rem;
  --space-48: 4.8rem;
  --space-56: 5.6rem;
  --space-64: 6.4rem;
  --space-80: 8rem;
  --space-96: 9.6rem;

  /* ========================================
     spacing responsive
  ======================================== */
  --rspace-8: clamp(0.8rem, 0.76rem + 0.12vw, 0.8rem);
  --rspace-12: clamp(1rem, 0.9rem + 0.25vw, 1.2rem);
  --rspace-16: clamp(1.2rem, 1rem + 0.45vw, 1.6rem);
  --rspace-20: clamp(1.4rem, 1.1rem + 0.6vw, 2rem);
  --rspace-24: clamp(1.6rem, 1.2rem + 0.8vw, 2.4rem);
  --rspace-32: clamp(2rem, 1.4rem + 1.1vw, 3.2rem);
  --rspace-40: clamp(2.4rem, 1.8rem + 1.4vw, 4rem);
  --rspace-48: clamp(2.8rem, 2rem + 1.7vw, 4.8rem);
  --rspace-64: clamp(3.2rem, 2.2rem + 2.2vw, 6.4rem);
  --rspace-80: clamp(4rem, 2.8rem + 2.8vw, 8rem);

/* ========================================
    layout
======================================== */
--layout-min-width: 20rem;
--layout-max-width: 120rem;
--layout-content-width: 100%;
--layout-narrow-width: 96rem;

--container-padding-x: 2.4rem;
--container-padding-x-tablet: 1.6rem;
--container-padding-x-mobile: 1.2rem;

--section-space-y: 8rem;
--section-space-y-tablet: 6.4rem;
--section-space-y-mobile: 4.8rem;

--header-height: 6.6rem;
--header-height-tablet: 5.8rem;
--header-height-mobile: 5.2rem;

--sidebar-width: 28rem;
--sidebar-width-collapsed: 8rem;

--grid-gutter: 2.4rem;
--grid-gutter-tablet: 1.6rem;
--grid-gutter-mobile: 1.2rem;

--z-base: 1;
--z-dropdown: 100;
--z-sticky: 300;
--z-fixed: 500;
--z-modal-backdrop: 900;
--z-modal: 1000;
--z-toast: 1100;

--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
}