/* ============================================================
   LIMPID · Design Tokens
   여기 있는 값만 고치면 사이트 전체 톤이 바뀐다.
   색·타이포·간격·모션의 단일 출처.
   ============================================================ */

@font-face {
  font-family: 'Pretendard Variable';
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 색 : 바탕 ---------- */
  --paper:        #ffffff;   /* 기본 배경 */
  --paper-soft:   #f4f5f8;   /* 한 단계 눌린 섹션 */
  --paper-tint:   #eaf0fa;   /* 브랜드가 살짝 도는 면 */

  /* 어두운 면의 배경색. --ink 를 뒤집는 섹션 안에서도 흔들리면 안 되므로 따로 둔다 */
  --surface-dark: #0f1523;

  /* ---------- 색 : 잉크 ---------- */
  --ink:          #0f1523;   /* 제목. 순수 검정은 쓰지 않는다 */
  --ink-2:        #3c4353;   /* 본문 */
  --ink-3:        #767d8d;   /* 보조·캡션 */
  --ink-4:        #a3a9b6;   /* 비활성 */
  --ink-faint:    #b9c0cd;   /* 2톤 헤드라인의 뒤쪽 절반 */

  /* ---------- 색 : 브랜드 ---------- */
  --brand:        #2351a3;   /* SSOT. 림피드 디자인시스템 기준색 */
  --brand-deep:   #16386f;
  --brand-bright: #3a76d8;
  --brand-tint:   #e8f0fb;
  /* 다크면(어두운 배경) 위에서 쓰는 강조색. base.css .section--ink 와 헬스케어 섹션이 쓴다.
     다른 페이지는 var(--brand-on-dark, #7ea8ee) 로 참조 */
  --brand-on-dark: #7ea8ee;

  /* ---------- 색 : 선 ---------- */
  --line:         #e4e6ec;
  --line-soft:    #eef0f4;
  --line-strong:  #c7ccd6;

  /* ---------- 색 : 어두운 면 위 ---------- */
  --on-ink:       #ffffff;
  --on-ink-2:     rgba(255, 255, 255, .74);
  --on-ink-3:     rgba(255, 255, 255, .50);
  --on-ink-line:  rgba(255, 255, 255, .16);

  /* ---------- 타이포 ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 6.2vw, 6rem);      /* 히어로 */
  --fs-h2:      clamp(1.85rem, 3.1vw, 3.1rem);   /* 섹션 제목 */
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-h4:      1.0625rem;
  --fs-lede:    clamp(1rem, 1.15vw, 1.1875rem);  /* 리드 문단 */
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .75rem;

  --lh-display: 1.12;
  --lh-tight:   1.24;
  --lh-body:    1.78;

  --ls-display: -.035em;
  --ls-tight:   -.025em;
  --ls-wide:    .16em;    /* eyebrow */

  /* ---------- 레이아웃 ---------- */
  --shell:      1320px;                        /* 콘텐츠 최대폭 */
  --gutter:     clamp(20px, 4.4vw, 60px);
  /* 화면 어디서나 "콘텐츠 그리드의 좌측 선".
     .shell 안이 아닌 absolute/full-bleed 요소도 이 값으로 정렬한다 */
  --edge:       max(var(--gutter), calc((100vw - var(--shell)) / 2));
  --sec-y:      clamp(84px, 9.5vw, 168px);     /* 섹션 상하 여백 */
  --sec-y-sm:   clamp(56px, 6vw, 104px);

  /* ---------- 마커 ----------
     림피드 로고 심볼(잎)의 단색 마스크. 라벨 마커 공용.
     data URI 인 이유 : file:// 로컬에서 CSS mask 의 외부 파일 참조가 CORS 로 막힌다 */
  --mark-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADTUlEQVR42u2bO2hUURCGv7l7g+IjKBEkRWwUFBWFBETFQhQlPkBBazttBMEqhU0KQRC0sxCxthIUNVEUgo0IIShGGyFompCghVEU0b07FjtHDteNeSe7dzKw3LsP2P3/+c+cObMzwhyZqpYARCSLXmsBdgIdwHZgI9AKNAPLgCYWxxQQYCydI+CVAFxVNwCdwFFglwGuV1uezgJ4EntcVQ8BZ4EjwKrcx4MqxB5EzxdTAZrOEHwqImW77wS6gP01ACf2RaV6lUA6TeBSdbqUVXULcAU4aW9XjNmkngHPmABVTUSkUr3VC8BlYHUEvGFAT5sAVS2JSKaqa4FbwKlI6g0JfMoEhPWuqpuBu8A2oGzAGxr8pARE4DuAR8B6A59SEEsnkX1ZVduBJ0BL0cCHbWqigJep6iagx8BnRQNfkwDb6lDVZuC+yT4rwnqfqgJKtt3dBrZGAY/CExCt+3PAaeB3EWVPrVzccnsF2oC3wMoauXtRLJwFRmMFiIgocC3K8ISCW5LL9PaZ9LOiSz8fA9Su3TizxLxfUdXdwEGTfskNAdH9+ehY68ZC0rMOGKJaq1MHwe+fXaDTwGceIn+tJXDMWFGPQXAFsMc8n7gjgGq9vu1/p8OiE9Bu1wyHlgA7cGwJ1b+r8Bb9YwJavStgjXcFNHlXAEsELBGwRIBXK3slIBz6vnhXwKh3BQx5V8CgVwJKpoJXiWP5j3hVQOhpeiki37wuAQEeekyEQjfbd6DXIwGh7NcjImOqWkqcpv43PJ4FMsP7QkSehz4oj0GwO66AJY68X7K1/zT0Q3ghICQ+P4GL1gWnnmJA6HK7JCLvgdD07YKAMtWib6+IXLfW38xLRSj0OX0Ezpj0K15KYiHojQMnRORzXvpFJiCA/2Hg38RRv+gEhID3FThuCU86EfgiEaBRK/8wcEBE+uLhriITkEWzD8+AvSIyMBXwjU5AJVrvZUtxD4vISGj6Zq7H5upE6pWorgfQB3SJSL+qSjjkMB9zg4sMWu33BuCvgasicic3zKnzNji5QGA1us9Pnmbm8ZvAPZtt+DvMyXxPjrIwtbp8o8a4efsx8EBE3uXnGWfT31hPBPwysJ+AD8Ag0A8MiMhwbrBD4on12dgfghlEpyCvLKsAAAAASUVORK5CYII=');

  /* ---------- 모양 ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(15, 21, 35, .04),
                 0 12px 32px -12px rgba(15, 21, 35, .10);
  --shadow-lift: 0 2px 4px rgba(15, 21, 35, .05),
                 0 28px 56px -20px rgba(15, 21, 35, .18);

  /* ---------- 모션 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .42s;
  --dur-fast: .2s;
}