/* ============================================================
   큐플러스 홈페이지 스타일 — 디자인 시스템 토큰 + 페이지 스타일
   웹폰트(Pretendard·JetBrains Mono)는 CDN에서 로드됩니다.
   ============================================================ */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   FONTS — Pretendard (한글/라틴 본문·UI) + JetBrains Mono (숫자/코드)
   ------------------------------------------------------------
   @font-face 로 직접 선언합니다. src 는 jsDelivr CDN woff2 를 가리킵니다.
   ⚠ 오프라인/프로덕션 번들이 필요하면 동일 woff2 파일을 받아
   프로젝트에 self-host 하고 아래 url() 을 로컬 경로로 교체하세요.
   ============================================================ */

/* Pretendard — 가변 폰트 (weight 45–920) */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

/* JetBrains Mono — 400 / 500 / 700 */
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-700-normal.woff2") format("woff2");
}


/* ===== tokens/colors.css ===== */
/* ============================================================
   COLORS — 큐플러스 컬러 시스템
   마스터: 그린  /  클릭원큐: 블루  /  발주원큐: 오렌지  /  셀러원큐: 바이올렛
   ============================================================ */
:root {
  /* ---------- 그린 · 마스터 브랜드 (Q-Green) ---------- */
  --green-50:  #E9FBF1;
  --green-100: #C6F4DD;
  --green-200: #8FE9BE;
  --green-300: #54D99B;
  --green-400: #22C97D;
  --green-500: #11B86A;   /* ★ 브랜드 프라이머리 */
  --green-600: #0C9E5A;
  --green-700: #0B7E49;
  --green-800: #0A5E38;
  --green-900: #073D26;

  /* ---------- 블루 · 클릭원큐 (마켓통합관리) ---------- */
  --blue-50:  #EAF3FF;
  --blue-100: #CFE4FF;
  --blue-200: #A1CBFF;
  --blue-300: #66A9FF;
  --blue-400: #3B8DFF;
  --blue-500: #2483FF;    /* ★ 클릭원큐 프라이머리 */
  --blue-600: #0E69E6;
  --blue-700: #0F52B4;
  --blue-800: #11428C;
  --blue-900: #0E2C5C;

  /* ---------- 오렌지 · 발주원큐 (발주통합관리) ---------- */
  --orange-50:  #FFF4E6;
  --orange-100: #FFE3C2;
  --orange-200: #FFC98A;
  --orange-300: #FFAC4F;
  --orange-400: #FF982A;
  --orange-500: #FF8A1F;  /* ★ 발주원큐 프라이머리 */
  --orange-600: #ED7305;
  --orange-700: #BE5A06;
  --orange-800: #94470A;
  --orange-900: #5E2C04;

  /* ---------- 바이올렛 · 셀러원큐 (공급·판매 매칭) ---------- */
  --violet-50:  #F1EEFF;
  --violet-100: #E2DBFF;
  --violet-200: #C7B9FF;
  --violet-300: #A690FF;
  --violet-400: #8C6EFF;
  --violet-500: #7C5CFC;  /* ★ 셀러원큐 프라이머리 */
  --violet-600: #6A45F0;
  --violet-700: #5733D6;
  --violet-800: #442AA6;
  --violet-900: #2E1C70;

  /* ---------- 뉴트럴 · 그린 틴트 슬레이트 ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #F8FAF9;
  --neutral-50:  #F3F6F5;
  --neutral-100: #E9EEEC;
  --neutral-200: #DCE3E0;
  --neutral-300: #C3CCC8;
  --neutral-400: #9CA8A2;
  --neutral-500: #76847E;
  --neutral-600: #586862;
  --neutral-700: #3E4E47;
  --neutral-800: #283732;
  --neutral-900: #11221C;

  /* ---------- 상태(시맨틱) 원색 ---------- */
  --red-50:   #FDECEC;
  --red-500:  #E5484D;
  --red-600:  #CE363B;
  --amber-50: #FEF5E1;
  --amber-500:#F5A623;
  --amber-600:#D98A0B;

  /* ============================================================
     시맨틱 별칭 — UI는 아래 변수를 사용하세요
     ============================================================ */

  /* 브랜드 */
  --color-brand:        var(--green-500);
  --color-brand-hover:  var(--green-600);
  --color-brand-active: var(--green-700);
  --color-brand-soft:   var(--green-50);
  --color-brand-on:     #FFFFFF;

  /* 텍스트 */
  --text-strong:  var(--neutral-900);
  --text-default: #2C3A34;
  --text-muted:   #67756E;
  --text-subtle:  var(--neutral-400);
  --text-on-dark: #FFFFFF;
  --text-link:    var(--blue-600);

  /* 배경 · 표면 */
  --bg:             #F4F7F6;
  --surface:        #FFFFFF;
  --surface-subtle: #F6F9F8;
  --surface-sunken: #EFF3F2;
  --surface-inverse:var(--neutral-900);

  /* 보더 · 라인 */
  --border:        #E4EAE7;
  --border-strong: #D2DAD6;
  --border-on-dark: rgba(255,255,255,.16);

  /* 포커스 링 */
  --ring: var(--green-500);

  /* 상태 */
  --success:      var(--green-500);
  --success-soft: var(--green-50);
  --success-text: var(--green-700);
  --info:         var(--blue-500);
  --info-soft:    var(--blue-50);
  --info-text:    var(--blue-700);
  --warning:      var(--amber-500);
  --warning-soft: var(--amber-50);
  --warning-text: var(--amber-600);
  --danger:       var(--red-500);
  --danger-soft:  var(--red-50);
  --danger-text:  var(--red-600);

  /* ---------- 제품 별칭 (색 = 제품) ---------- */
  --product-click:       var(--blue-500);
  --product-click-soft:  var(--blue-50);
  --product-click-text:  var(--blue-700);

  --product-order:       var(--orange-500);
  --product-order-soft:  var(--orange-50);
  --product-order-text:  var(--orange-700);

  --product-seller:      var(--violet-500);
  --product-seller-soft: var(--violet-50);
  --product-seller-text: var(--violet-700);

  --product-qplus:       var(--green-500);
  --product-qplus-soft:  var(--green-50);
  --product-qplus-text:  var(--green-700);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Pretendard 기반 타입 스케일
   ============================================================ */
:root {
  /* 폰트 패밀리 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 굵기 */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* 폰트 크기 — UI/본문 스케일 */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* 기본 본문 */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-60: 60px;

  /* 행간 */
  --lh-tight:   1.2;  /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* 자간 — 한글은 음수 트래킹이 표준 */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:  -0.01em; /* @kind other */
  --ls-wide:    0.02em;  /* @kind other */
  --ls-caps:    0.06em;  /* @kind other */

  /* ---------- 시맨틱 텍스트 역할 ---------- */
  /* 디스플레이 (히어로) */
  --text-display:        var(--fw-extra) var(--fs-60)/var(--lh-tight) var(--font-sans);
  --text-display-tracking: var(--ls-tighter);
  /* 제목 */
  --text-h1: var(--fw-extra) var(--fs-40)/var(--lh-tight) var(--font-sans);
  --text-h2: var(--fw-bold) var(--fs-32)/var(--lh-tight) var(--font-sans);
  --text-h3: var(--fw-bold) var(--fs-24)/var(--lh-snug) var(--font-sans);
  --text-h4: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-sans);
  /* 본문 */
  --text-body-lg: var(--fw-regular) var(--fs-16)/var(--lh-relaxed) var(--font-sans);
  --text-body:    var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans);
  --text-body-sm: var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans);
  /* 라벨/캡션 */
  --text-label:   var(--fw-semibold) var(--fs-13)/var(--lh-snug) var(--font-sans);
  --text-caption: var(--fw-medium) var(--fs-12)/var(--lh-snug) var(--font-sans);
  --text-overline:var(--fw-bold) var(--fs-11)/var(--lh-snug) var(--font-sans);
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   SPACING — 4px 베이스 그리드
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* 컨테이너 */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  /* 시맨틱 간격 */
  --gutter:        24px;   /* 그리드 거터 */
  --section-y:     96px;   /* 마케팅 섹션 상하 여백 */
  --card-pad:      24px;   /* 카드 기본 패딩 */
  --control-pad-x: 16px;   /* 컨트롤 좌우 패딩 */
}


/* ===== tokens/radius.css ===== */
/* ============================================================
   RADIUS — 코너 라운딩 (부드럽고 친근, 과하지 않게)
   ============================================================ */
:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* 버튼·인풋 기본 */
  --radius-lg:   14px;   /* 카드 */
  --radius-xl:   18px;
  --radius-2xl:  24px;   /* 큰 패널·모달 */
  --radius-pill: 999px;  /* 칩·뱃지·태그 */
  --radius-full: 50%;    /* 아바타 */
}


/* ===== tokens/shadow.css ===== */
/* ============================================================
   SHADOW — 외부 그림자(엘리베이션) + 포커스 링
   그린 틴트가 살짝 섞인 차분한 그림자
   ============================================================ */
:root {
  --shadow-xs:  0 1px 2px rgba(16, 40, 32, 0.06);
  --shadow-sm:  0 1px 2px rgba(16, 40, 32, 0.06), 0 2px 6px rgba(16, 40, 32, 0.05);
  --shadow-md:  0 2px 4px rgba(16, 40, 32, 0.05), 0 8px 20px rgba(16, 40, 32, 0.08);
  --shadow-lg:  0 4px 10px rgba(16, 40, 32, 0.06), 0 16px 40px rgba(16, 40, 32, 0.10);
  --shadow-xl:  0 8px 24px rgba(16, 40, 32, 0.10), 0 32px 64px rgba(16, 40, 32, 0.12);

  /* 브랜드 컬러 글로우 (CTA 강조용) */
  --shadow-brand: 0 6px 18px rgba(17, 184, 106, 0.30);

  /* 포커스 링 */
  --focus-ring:        0 0 0 3px rgba(17, 184, 106, 0.30);
  --focus-ring-danger: 0 0 0 3px rgba(229, 72, 77, 0.30);

  /* 내부 그림자(인셋) */
  --shadow-inset: inset 0 1px 2px rgba(16, 40, 32, 0.06);
}


/* ===== tokens/motion.css ===== */
/* ============================================================
   MOTION — 이징 & 듀레이션
   기본은 빠르고 차분한 페이드/슬라이드. 바운스는 지양.
   ============================================================ */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in-out:   cubic-bezier(0.45, 0, 0.15, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.34, 1.3, 0.64, 1); /* @kind other */

  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */
  --dur-slower: 400ms; /* @kind other */

  /* 자주 쓰는 트랜지션 */
  --transition-colors: color var(--dur-fast) var(--ease-standard),
                       background-color var(--dur-fast) var(--ease-standard),
                       border-color var(--dur-fast) var(--ease-standard);
  --transition-transform: transform var(--dur-base) var(--ease-out);
}


/* ===== tokens/base.css ===== */
/* ============================================================
   BASE — 가벼운 리셋 & 문서 기본값
   (토큰 사용 권장; 여기는 최소한의 전역 설정만)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--text-body);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-normal);
  color: var(--text-default);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* 숫자는 표 정렬에 유리하게 */
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

::selection { background: var(--green-200); color: var(--green-900); }

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



/* ===== 페이지 · 버튼 스타일 ===== */
* { box-sizing: border-box; }
  body { margin: 0; }
  a { text-decoration: none; }
  html { scroll-behavior: smooth; }
  body { word-break: keep-all; text-wrap: pretty; }
  section[id] { scroll-margin-top: 84px; }
  .qpbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-weight:var(--fw-bold); border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; border:1px solid transparent; text-decoration:none; line-height:1; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; }
  .qpbtn:active { transform: scale(.97); }
  .qpbtn-sm { height:34px; padding:0 14px; font-size:var(--fs-13); border-radius:var(--radius-sm); }
  .qpbtn-md { height:42px; padding:0 18px; font-size:var(--fs-14); }
  .qpbtn-lg { height:52px; padding:0 26px; font-size:var(--fs-16); }
  .qpbtn-full { width:100%; }
  .qpbtn-primary { background:var(--color-brand); color:#fff; box-shadow:var(--shadow-xs); }
  .qpbtn-primary:hover { background:var(--color-brand-hover); box-shadow:var(--shadow-brand); }
  .qpbtn-outline { background:var(--surface); color:var(--text-default); border:1px solid var(--border-strong); }
  .qpbtn-outline:hover { background:var(--surface-subtle); }
  .qpbtn-ghost { background:transparent; color:var(--text-default); }
  .qpbtn-ghost:hover { background:var(--surface-sunken); }