/* =========================================================
   Ubistorm Design System — Design Tokens
   colors_and_type.css 기반, 2026 프로젝트 통합본
   Primary blue #0764af · Teal #13978c · Green #54b049
   Mood: 중후함(sophisticated/dignified) · legacy/enterprise
   ========================================================= */

/* ── Web Fonts (로컬) ── */
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-ExtraLight.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0020-0027, U+002A-002E, U+0030-FFFF; }

:root {
  /* ── Brand core (CI 직접 추출) ── */
  --us-blue-900: #2139a0;
  --us-blue-800: #2b45be;
  --us-blue-700: #3651d9;   /* primary */
  --us-blue-600: #3b62d7;
  --us-blue-500: #4b78d4;
  --us-blue-400: #749ade;
  --us-blue-300: #9db9e9;
  --us-blue-200: #c3d3f2;
  --us-blue-100: #e1e9f8;
  --us-blue-050: #f6f9fd;

  --us-sky-500: #28d4ff;
  --us-sky-050: #d4f6ff;

  --us-teal-700: #0d6b63;
  --us-teal-600: #13978c;   /* CI accent */
  --us-teal-500: #2cb1a5;

  --us-green-700: #3d8536;
  --us-green-600: #54b049;  /* CI accent */
  --us-green-500: #76c66c;
  --us-green-400: #28d478;

  --us-yellow-500: #fbd957;

  /* Storm/ink — 본문·크롬 */
  --us-ink-950: #0b1220;
  --us-ink-900: #131b2c;
  --us-ink-800: #1c2638;
  --us-ink-700: #2a3548;
  --us-ink-600: #3e4a60;
  --us-ink-500: #5b677d;
  --us-ink-400: #828ea4;
  --us-ink-300: #aab3c4;
  --us-ink-200: #cdd3df;
  --us-ink-150: #e1e6ee;
  --us-ink-100: #eef1f6;
  --us-ink-050: #f6f8fb;
  --us-ink-000: #ffffff;

  /* Warm paper — 레거시/중후함 무드 */
  --us-paper:        #faf8f3;
  --us-paper-warm:   #eef1f6;
  --us-paper-edge:   #e6dfcf;

  /* Amber/copper — 수상·인증 배지 */
  --us-amber-700: #8a5a17;
  --us-amber-600: #b1761f;
  --us-amber-500: #d99634;
  --us-amber-100: #f7ecd6;

  /* Semantic */
  --us-success: var(--us-green-600);
  --us-warning: #d99634;
  --us-danger:  #ff4444;
  --us-info:    var(--us-blue-700);

  /* ── Foreground / Background 토큰 ── */
  --fg-1: var(--us-ink-950);
  --fg-2: var(--us-ink-700);
  --fg-3: var(--us-ink-500);
  --fg-4: var(--us-ink-400);
  --fg-white: #ffffff;
  --fg-link: var(--us-blue-700);
  --fg-link-hover: var(--us-blue-800);

  --bg-1: var(--fg-white);
  --bg-2: var(--us-ink-050);
  --bg-3: var(--us-ink-100);
  --bg-paper: var(--us-paper);
  --bg-paper-warm: var(--us-paper-warm);
  --bg-deep: var(--us-ink-900);
  --bg-deep-blue: #103a72;
  --bg-report:var(--us-blue-900);
  --bg-eform:#FB3E5F;
  --bg-formplue:#6A3BD7;
  --bg-magellan:#5f68d0;

  /* ── 보더 ── */
  --border-1: var(--us-ink-150);
  --border-2: var(--us-ink-200);
  --border-strong: var(--us-ink-300);
  --border-bright: var(--us-ink-000);
  --border-on-deep: rgba(255,255,255,.12);

  /* ── 서체 패밀리 ── */
  --font-en:      "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Inter", "Pretendard", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ── 타입 스케일 (18px base · 1440px 기준 fluid) ── */
  --fs-display: clamp(36px, 5.00vw, 70px); --lh-display: 1.08; --tr-display: -0.05em;
  --fs-h1: clamp(25px, 3.75vw, 52px);      --lh-h1: 1.14;      --tr-h1: -0.05em;
  --fs-h2: clamp(21px, 2.85vw, 39px);      --lh-h2: 1.2;       --tr-h2: -0.05em;
  --fs-h3: clamp(18px, 2.01vw, 27px);      --lh-h3: 1.3;       --tr-h3: -0.05em;
  --fs-h4: clamp(16px, 1.60vw, 22px);      --lh-h4: 1.4;       --tr-h4: -0.05em;
  --fs-section-title: clamp(22px, 2.4vw, 44px); /* 섹션 타이틀 공통 */
  --fs-cta-title:     clamp(36px, 4.2vw, 50px); /* CTA/배너 타이틀 공통 */
  --fs-body-lg: clamp(14px, 1.39vw, 20px); --lh-body-lg: 1.6; --tr-body-lg: -0.05em;
  --fs-body:    clamp(14px, 1.25vw, 18px); --lh-body: 1.65; --tr-body: -0.05em;
  --fs-body-sm: clamp(14px, 1.11vw, 16px); --lh-body-sm: 1.45;
  --fs-caption: 15px; --lh-caption: 1.45;
  --fs-micro:   12px; --lh-micro: 1.4;
  --fs-eyebrow: 14px; --lh-eyebrow: 1.2;   --tr-eyebrow: -0.05em;
  --ls: -0.05em;
  --ls-lg: 0.15em;

  /* ── 스페이싱 (4px base) ── */
  --sp-0: 0;    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;
  --sp-8: 40px; --sp-9: 56px;  --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;

  /* ── 레이아웃 ── */
  --header-h: 48px;   /* desktop: logo 18px + padding 15px×2 | tablet: 66px | mobile: 50px */

  /* ── 라디우스 (enterprise tight) ── */
  --r-none: 0;  --r-xs: 2px;  --r-sm: 4px;  --r-md: 6px;
  --r-lg: 10px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;

  /* ── 그림자 (cool, blue-tinted) ── */
  --sh-1: 0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.04);
  --sh-2: 0 2px 6px rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
  --sh-3: 0 6px 18px rgba(11,18,32,.08), 0 2px 4px rgba(11,18,32,.05);
  --sh-4: 0 18px 48px rgba(7,100,175,.14), 0 4px 12px rgba(11,18,32,.06);
  --sh-card: 0 1px 0 rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(11,18,32,.04);
  --sh-focus: 0 0 0 3px rgba(7,100,175,.25);

  /* ── 모션 (calm, 중후함) ── */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-storm:  cubic-bezier(.4,0,.2,1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-slower:  720ms;

  /* ── 그라디언트 ── */
  --grad-hero:      linear-gradient(135deg, #03346b 0%, #0764af 60%, #13978c 110%);
  --grad-hero-soft: linear-gradient(135deg, #eef4fb 0%, #f6f9fd 50%, #f1ece0 100%);
  --grad-storm:     radial-gradient(120% 80% at 20% 0%, rgba(7,100,175,.18), transparent 60%),
                    radial-gradient(80% 60% at 90% 100%, rgba(19,151,140,.14), transparent 60%),
                    linear-gradient(180deg, #0b1220 0%, #131b2c 100%);
  --grad-card:      linear-gradient(
                      to right,
                      color-mix(in srgb, var(--us-sky-500) 12%, transparent) 0%,
                      color-mix(in srgb, var(--us-blue-700) 12%, transparent) 100%
                    );
}

@media (max-width: 768px) {
  :root { --header-h: 72px; }
}