/* ============ design tokens — smoov home-1 clone ============ */
/* 모든 수치는 Playwright 원본 추출값(1440x900) 기준 */
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colors */
  --c-bg: #ffffff;
  --c-ink: #2c2d2f;
  --c-white: #ffffff;
  --c-off-white: #f7f7f7;
  --c-grey: #52525b;
  --c-near-white: #ffffff;
  --c-black-bar: #0a0a0a;
  --c-social-ink: #090914;
  --c-lime: #b0ff07;
  --c-blue: #70baff;
  --c-overlay: rgba(0, 0, 0, .29);          /* hero overlay #0000004a */
  --c-overlay-sticky: rgba(0, 0, 0, .8);
  --c-tag-bg-light: rgba(255, 255, 255, .04);
  --c-tag-bg-dark: rgba(0, 0, 0, .04);
  --c-btn-dark: rgba(18, 18, 18, .69);      /* #121212b0 */
  --c-pill-dark: rgba(2, 2, 2, .6);         /* secondary button */
  --c-credit-dim: rgba(239, 238, 236, .5);

  /* typography (root 16px) */
  --ff: 'Satoshi', 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  --fs-body: 1rem;        /* 16 */ --lh-body: 1.6;
  --fs-tiny: .8rem;       /* 12.8 */   --lh-tiny: 1.25;  --ls-tiny: .8px;
  --fs-small: .95rem;     /* 15.2 */
  --fs-regular: 1.125rem;  /* 18 */   --lh-regular: 1.6;
  --fs-medium: 1.25rem;   /* 20 */   --lh-medium: 1.3;
  --fs-display: 2.25rem;   /* 36 */   --lh-display: 1.1;
  --fs-cta: 2.25rem;       /* 36 */   --lh-cta: 1.5;
  --fs-xhuge: 2.5rem;      /* 40 */   --lh-xhuge: 1.25;
  --fs-h1: 4.5rem;         /* 72 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-footer-h: 7.5rem;   /* 120 */

  /* layout */
  --container-max: 92vw;            /* 1324 @1440 */
  --section-pad-x: 4em;             /* 57.6 (body em) */
  --nav-pad-top: 1rem;              /* 16 */
  --nav-pad-bottom: 0.75rem;        /* 12 */

  /* spacing */
  --sp-1: .5rem;   /* 8 */
  --sp-2: 1rem;    /* 16 */
  --sp-3: 1.5rem;  /* 24 */
  --sp-4: 2rem;    /* 32 */
  --sp-6: 3rem;    /* 48 */

  /* radii */
  --r-tag: 4px;
  --r-card: 8px;
  --r-btn: 12px;
  --r-pill: 8px;
  --r-parallax: 8.03px;

  /* hero */
  --tag-mb: .5em;                   /* 태그 폰트 기준: hero 7.2 / parallax 6.48 */
  --hero-h1-pad-b: 8.64px;          /* overflow-hidden.padding */
  --hero-para-mt: 40px;
  --hero-para-maxw: 480px;
  --marquee-bottom: 1.125em;        /* 16.2 @1440 / 18 @mobile (body em) */
  --marquee-gap: 10em;             /* 93.6 → 확대 */
  --marquee-img-w: 6.5em;           /* 93.59, height auto(2.95:1) */

  /* services */
  --svc-pad-top: 8em;               /* 115.2 */
  --svc-pad-bottom: 5.375em;        /* 77.4 */
  --svc-wrapper-gap: 4em;           /* 57.6 */
  --svc-content-gap: 4.875em;       /* 70.2 */
  --svc-header-ml: 2.75em;          /* 39.6 */
  --svc-grid-gap: 1rem;             /* 16 */
  --svc-item-h: 10rem;              /* 160 */
  --svc-card-pad: 3.625rem 7rem 3.625rem 4.5rem;  /* 58 112 58 72 */
  --svc-card-title-fs: 2.5rem;      /* 40/50 */
  --svc-btn-pad: 8px 24px 8px 8px;
  --svc-btn-gap: 24px;
  --svc-btn-content-pad: 8px 21px;
  --svc-btn-spacer-mr: 8px;

  /* scale grid (ix2 scroll0 측정값) */
  --scale-cell-w: 32.7vw;           /* authored 기본값 (ix2가 스크롤로 확대) */
  --scale-cell-h: 33.3333vh;
  --scale-gap: 1rem;

  /* works */
  --works-pad-top: 8em;             /* 115.2 */
  --works-pad-bottom: 9.25em;       /* 133.2 */
  --works-wrapper-gap: 5em;         /* 72 */
  --works-col-gap: 2rem;            /* 32 */
  --works-row-gap: 3rem;            /* 48 */
  --works-card-gap: 1.3rem;         /* 20.8 */
  --works-para-maxw: 26rem;         /* 416 */
  --works-para-mr: 2.75em;          /* 39.6 */
  --works-header-mb: .7em;          /* 10.08 */
  --works-desc-maxw: 31.5rem;       /* 504 (원본은 fs16 컨텍스트의 31.5em) */
  --header-ml: 2.75em;              /* 39.6 (services/works 공용) */

  /* parallax */
  --par-line-fs: 2.25rem;           /* 36/39.6 */
  --par-img-opacity-mobile: .4;     /* 데스크톱은 1 (원본 CSS의 .4는 모바일 규칙) */

  /* cta */
  --cta-grid-pad-top: 5.3125em;     /* 76.5 */
  --cta-grid-pad-bottom: 6.0625em;  /* 87.3 */
  --cta-grid-gap: 1em;              /* 14.4 */
  --cta-header-gap: 3.75em;         /* 54 */
  --cta-para-maxw: 28.5rem;         /* 456 */
  --cta-btn-gap: 11px;
  --cta-row2-h: 309.906px;          /* 측정값(authored 단위 추출불가) */
  --cta-content-gap: 13.625em;      /* 196.2 */
  --cta-line-bg: rgba(44,45,47,.1);
  --cta-arrow-w: 12.5469px;

  /* footer */
  --foot-wrap-mt: 4.5em;            /* 64.8 */
  --foot-wrap-mb: 2.5em;            /* 36 */
  --foot-wrap-gap: 10rem;           /* 160 */
  --foot-desc-maxw: 21.6em;         /* 345.6 */
  --foot-desc-social-gap: 45px;        /* 3.125em */
  --foot-social-gap: .8rem;         /* 12.8 */
  --foot-cols-gap: 7rem;            /* 112 */
  --foot-col-gap: 2rem;             /* 32 */
  --foot-bottom-gap: 2rem;          /* 32 */
  --foot-bar-pad-y: 1.5rem;         /* 24 → h 69 */
  --foot-legal-gap: 1em;            /* 14.4 */
  --c-nav-bg: rgba(221,221,221,0);
  --c-social-border: #d4d4d8;
  --c-vline: #efeeec;
  --foot-links-inner-gap: 1.5rem;   /* 24 */
  --par-wrap-gap: 1.625em;          /* 23.4 */
}