/* ==========================================================================
   Design Tokens — 전세금 반환센터 랜딩페이지
   Figma: wkpZQC5BlTHneflMUkEuwz
   ========================================================================== */
:root {
  /* Color */
  --color-black: #1a1a1a;
  --color-darkblue: #092962;
  --color-blue: #1865eb;
  --color-skyblue: #73bbff;
  --color-red: #d11313;
  --color-white: #ffffff;
  --color-grey-900: #2d2d2d;
  --color-grey-400: #939393;
  --color-grey-300: #e9e9e9;
  --color-grey-200: #f5f6f7;
  --color-bluegrey-100: #fbfcff;
  --color-bluegrey-300: #cad0e6;
  --color-bluegrey-500: #9fa5b9;
  --color-bluegrey-600: #707899;
  --color-white-alpha-12: rgba(255, 255, 255, 0.12);

  /* Font family */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;

  /* PC container: 1440 frame / 1080px fixed content width (180px side padding) */
  --container-max: 1080px;
  --container-pad-pc: 180px;   /* 1440px viewport */
  --container-pad-ta: 40px;    /* 768px viewport (Figma section padding) */
  --container-pad-mo: 16px;    /* 375px viewport */

  /* Fluid clamp anchors: viewport breakpoints used across the whole site */
  --vw-mo: 375;
  --vw-ta: 768;
  --vw-pc: 1440;

  --z-header: 500;
  --z-sidebar: 400;
  --z-form: 600;
  --z-scrolltop: 450;
  --z-modal: 700;
}

/* ==========================================================================
   Fluid clamp() helper — how every section's clamp() values were derived
   --------------------------------------------------------------------------
   Two-segment linear interpolation so px values are EXACT at 375 / 768 / 1440
   and continuous (no visual "jump") at any width in between (e.g. 900, 1200).

   Segment A (375px → 768px):
     slope = (V768 - V375) / (768 - 375)
     clamp(min(V375,V768)px, calc(V375px + slope * (100vw - 375px)), max(V375,V768)px)

   Segment B (768px → 1440px):
     slope = (V1440 - V768) / (1440 - 768)
     clamp(min(V768,V1440)px, calc(V768px + slope * (100vw - 768px)), max(V768,V1440)px)

   Segment A is wrapped in `@media (max-width: 767px)`,
   Segment B is the default (>= 768px) rule.
   ========================================================================== */