@charset "utf-8";

/*
 * 웰브릿지 디자인 토큰. 공개 사이트와 인트라넷이 함께 쓴다.
 * head.sub.php가 wb-fonts.css 다음에 모든 페이지에 불러온다.
 * :root의 --wb-* 변수만 둔다. 규칙을 넣으면 모든 화면이 바뀐다(tools/uat/check.site-static.js가 검사).
 * 값의 정본: docs/redesign/recon/reference.md 1절.
 */
:root {
  /* 색: 글자 */
  --wb-c-text-strong: #0e1726;
  --wb-c-text: #17253d;
  --wb-c-accent: #2a446f;
  --wb-c-muted: #616161;
  --wb-c-link: #0067b8;

  /* 색: 바탕·면 */
  --wb-c-bg: #fffdfb;
  --wb-c-bg-alt: #fffcf9;
  --wb-c-surface: #fefefe;
  --wb-c-surface-pressed: #f6f5f7;
  --wb-c-tint: #f4fafd;
  --wb-c-tint-2: #dceef8;
  --wb-c-footer: #f2f2f2;

  /* 남색 */
  --wb-c-navy: #091f2c;
  --wb-c-navy-hover: #081c28;
  --wb-c-navy-pressed: #051118;
  --wb-c-navy-selected: #06161f;

  /* 면·선 */
  --wb-c-fill: rgba(6,22,31,.1);
  --wb-c-fill-hover: rgba(6,22,31,.2);
  --wb-c-divider: #bdc5d2;
  --wb-c-border-soft: #cbe6f4;
  --wb-c-border-card: #e6f2fb;
  --wb-c-teal: #00626a;
  --wb-c-on-navy: #dceef8;

  /* 그라데이션 */
  --wb-g-sky: linear-gradient(90deg,#ede8f6 0%,#f4fafd 49.99%,#dceef8 100%);
  --wb-g-template: linear-gradient(180deg,#f4fafd 0%,#dbf2ff 10%,#f4fafd 50%,#dcf2ff 90%,#b8e5ff 100%);
  --wb-g-lavender-mint: linear-gradient(135deg,#ede8f6 0%,#edf9f7 100%);
  --wb-g-pink: linear-gradient(90deg,#fff8e6 0%,#fff7f8 49.99%,#f1e9f1 100%);
  --wb-g-teal: linear-gradient(126deg,#225b62 0%,#133236 50%,#4e5c58 100%);

  /* 모서리(m·l은 860 이상에서 커진다) */
  --wb-r-xs: 4px;
  --wb-r-s: 8px;
  --wb-r-m: 8px;
  --wb-r-l: 16px;
  --wb-r-pill: 200px;

  /* 그림자 */
  --wb-depth-2: 0 0 .125rem rgba(0,0,0,.12),0 .063rem .125rem rgba(0,0,0,.14);
  --wb-depth-4: 0 0 .125rem rgba(0,0,0,.12),0 .125rem .25rem rgba(0,0,0,.14);
  --wb-depth-8: 0 0 .125rem rgba(0,0,0,.12),0 .25rem .5rem rgba(0,0,0,.14);
  --wb-depth-16: 0 0 .125rem rgba(0,0,0,.12),0 .5rem 1rem rgba(0,0,0,.14);
  --wb-depth-64: 0 0 .5rem rgba(0,0,0,.12),0 2rem 4rem rgba(0,0,0,.14);

  /* 움직임 */
  --wb-ease-expo: cubic-bezier(.19,1,.22,1);
  --wb-dur-pill: 125ms;
  --wb-dur-panel: 150ms;
  --wb-dur-indicator: 200ms;
  --wb-dur-faq: 350ms;
  --wb-dur-sticky: 380ms;
  --wb-dur-chevron: 600ms;
  --wb-dur-zoom: 600ms;
  --wb-dur-accordion: 800ms;
  --wb-dur-reveal: 1200ms;
  --wb-stagger: 25ms;

  /* 간격(860 미만) */
  --wb-space-2xs: 4px;
  --wb-space-xs: 8px;
  --wb-space-s: 12px;
  --wb-space-m: 12px;
  --wb-space-l: 16px;
  --wb-space-xl: 24px;
  --wb-space-2xl: 32px;
  --wb-space-3xl: 48px;
  --wb-space-4xl: 56px;
}

@media (min-width: 860px) {
  :root {
    --wb-r-m: 16px;
    --wb-r-l: 24px;
    --wb-space-m: 16px;
    --wb-space-l: 24px;
    --wb-space-xl: 32px;
    --wb-space-2xl: 48px;
    --wb-space-3xl: 72px;
    --wb-space-4xl: 96px;
  }
}