/* K-HACCP Design Tokens v2 — 2026-06-24 전성(jeonseong.co.kr) 디자인 통일
   주색: #0a5cae (딥 블루) / 배경: #f5f8fb / 텍스트: #15263a
*/
:root {
  /* ── Color ───────────────────────────────────────── */
  --c-brand-50:#ebf3fb;   --c-brand-100:#d0e6f8;  --c-brand-300:#7fc4ff;
  --c-brand-500:#0a5cae;  --c-brand-700:#15263a;  --c-brand-900:#0a1929;
  --c-ink-900:#0b0e12;    --c-ink-700:#1f2d3d;    --c-ink-500:#45525f;
  --c-ink-300:#64748b;    --c-ink-100:#d8e2ec;
  --c-bg:#ffffff;         --c-bg-soft:#f5f8fb;    --c-bg-cream:#ebf3fb;
  --c-line:#e5ebf2;       --c-line-soft:#eef3f9;
  --c-accent:#b81b22;     --c-success:#14946a;    --c-warning:#c87f1a;
  --c-gold:#cba258;

  /* semantic */
  --c-primary:var(--c-brand-500);
  --c-primary-strong:var(--c-brand-700);
  --c-text:var(--c-ink-700);
  --c-text-soft:var(--c-ink-500);
  --c-text-mute:var(--c-ink-300);

  /* ── Type Scale ───────────────────────────────── */
  --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-30:30px;
  --fs-36:36px; --fs-48:48px; --fs-60:60px; --fs-72:72px;
  --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; --fw-eb:800; --fw-bl:900;
  --lh-tight:1.1; --lh-snug:1.25; --lh-base:1.5; --lh-loose:1.75;
  --tr-tight:-0.025em; --tr-tighter:-0.04em;
  --ff-sans:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;

  /* ── Spacing (4pt grid) ───────────────────────── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;  --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --s-24:96px; --s-32:128px;
  --section-y:120px; --section-y-sm:80px; --container-x:32px;

  /* ── Radius ───────────────────────────────────── */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --r-2xl:28px; --r-pill:999px;

  /* ── Shadow (블루 틴트) ──────────────────────── */
  --sh-1:0 1px 2px rgba(20,60,110,.04), 0 1px 1px rgba(20,60,110,.03);
  --sh-2:0 4px 12px rgba(20,60,110,.06), 0 2px 4px rgba(20,60,110,.04);
  --sh-3:0 12px 32px -8px rgba(20,60,110,.10), 0 4px 8px rgba(20,60,110,.04);
  --sh-4:0 24px 56px -16px rgba(20,60,110,.14), 0 8px 16px rgba(20,60,110,.06);
  --sh-focus:0 0 0 3px rgba(10,92,174,.28);

  /* ── Motion ───────────────────────────────────── */
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --z-nav:100; --z-overlay:200; --z-modal:300;
}
@media (max-width: 760px){
  :root{ --section-y:80px; --section-y-sm:56px; --container-x:20px; }
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
  box-shadow:var(--sh-focus);
  border-radius:var(--r-xs);
}

@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");
}