디자인 토큰과 정밀 퍼블리싱

// ======================
// Typography
// ======================
$font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
$font-family-secondary: 'Noto Sans KR', sans-serif;

// Font Sizes
$font-size-h1: 64px;
$font-size-h2: 48px;
$font-size-h3: 32px;
$font-size-h4: 24px;
$font-size-body: 16px;
$font-size-caption: 14px;
$font-size-small: 12px;

// Font Weights
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Line Heights
$line-height-tight: 1.2;
$line-height-snug: 1.3;
$line-height-normal: 1.5;
$line-height-relaxed: 1.6;
$line-height-loose: 1.8;

// Letter Spacing
$letter-spacing-tight: -0.02em;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.05em;

// ======================
// Spacing
// ======================
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 48px;
$spacing-xxl: 80px;
$spacing-3xl: 120px;

// ======================
// Breakpoints
// ======================
$breakpoint-mobile: 360px;
$breakpoint-tablet: 768px;
$breakpoint-pc: 1920px;
$breakpoint-wide: 3440px;

// Inner Width (Container)
$inner-width-mobile: 324px;
$inner-width-tablet: 688px;
$inner-width-pc: 1720px;
$inner-width-wide: 2590px;

// ======================
// Colors
// ======================
$color-primary: #0066FF;
$color-primary-dark: #0052CC;
$color-secondary: #6B7280;

$color-background: #FFFFFF;
$color-surface: #F9FAFB;
$color-border: #E5E7EB;

$color-text-primary: #111827;
$color-text-secondary: #6B7280;
$color-text-muted: #9CA3AF;

// ======================
// 반응형 Mixin
// ======================
@mixin mobile {
  @media (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $breakpoint-tablet) and (max-width: #{$breakpoint-pc - 1px}) {
    @content;
  }
}

@mixin pc {
  @media (min-width: $breakpoint-pc) {
    @content;
  }
}

@mixin wide {
  @media (min-width: $breakpoint-wide) {
    @content;
  }
}

// _typography.scss
.page-title {
  font-family: $font-family-primary;
  font-size: $font-size-h1;
  font-weight: $font-weight-bold;
  line-height: $line-height-tight;
  letter-spacing: $letter-spacing-tight;
  color: $color-text-primary;

  @include tablet {
    font-size: $font-size-h2;
  }

  @include mobile {
    font-size: $font-size-h3;
  }
}

.section {
  padding: $spacing-xxl 0;

  @include mobile {
    padding: $spacing-xl 0;
  }
}

.container {
  max-width: $inner-width-pc;
  margin: 0 auto;
  padding: 0 $spacing-lg;

  @include wide {
    max-width: $inner-width-wide;
  }

  @include tablet {
    max-width: $inner-width-tablet;
  }

  @include mobile {
    max-width: $inner-width-mobile;
    padding: 0 $spacing-md;
  }
}

// lllayer_kda 디자인 토큰
// Figma Dev Mode에서 추출한 정확한 값

// Typography
$font-size-hero: 120px;     // 메인 타이틀
$font-size-h1: 64px;
$font-size-h2: 48px;
$font-size-h3: 32px;
$font-size-h4: 24px;
$font-size-body: 18px;
$font-size-caption: 14px;

// ... (프로젝트에 맞게 커스터마이즈)

.hero-title {
  font-size: 64px;
  line-height: 1.2;
  margin-bottom: 48px;
}

.hero-title {
  font-size: $font-size-h1;
  line-height: $line-height-tight;
  margin-bottom: $spacing-xl;
}

작업경로: layouts/lllayer_kda/assets/pages/_about_english.html
SCSS경로: layouts/lllayer_kda/assets/css/components/_about.scss

## 디자인 토큰 (반드시 준수)

### Typography
| 요소 | font-size | line-height | font-weight |
|-----|-----------|-------------|-------------|
| H1 | 64px | 1.2 | 700 |
| H2 | 48px | 1.3 | 600 |
| H3 | 32px | 1.4 | 600 |
| Body | 18px | 1.6 | 400 |
| Caption | 14px | 1.5 | 400 |

### Spacing
| 용도 | 값 |
|-----|-----|
| Section gap | 80px |
| Inner gap | 48px |
| Container padding | 24px |

### Breakpoints
| 디바이스 | 뷰포트 | Inner width |
|---------|--------|-------------|
| Wide | 3440px | 2590px |
| PC | 1920px | 1720px |
| Tablet | 768px | 688px |
| Mobile | 360px | 324px |

피씨 이 1개의 디자인을 Figma에서 구현하세요.
**위 토큰 값을 정확히 적용해주세요.**

@https://www.figma.com/design/...?node-id=XXX

작업경로: layouts/lllayer_kda/assets/pages/_service.html

## 디자인 토큰

### Hero Section
- 타이틀: 120px / 1.0 / 700 / letter-spacing: -0.03em
- 서브타이틀: 24px / 1.5 / 400
- Section padding: 160px 0

### Content Section
- Section title: 48px / 1.3 / 600
- Body text: 18px / 1.8 / 400
- Card gap: 24px
- Section gap: 120px

### SCSS 변수 파일
layouts/lllayer_kda/assets/css/_variables.scss 파일의 변수를 사용하세요.
하드코딩된 px 값 대신 $font-size-*, $spacing-* 변수를 사용해주세요.

피씨 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=XXX

[PC 스크린샷 첨부]