/*
 * =========================================================
 * Luxury Clean CSS Style Guide
 * =========================================================
 *
 * Source
 * - LC Primitives
 * - LC Semantics
 * - Figma Typography Style
 *
 * 구조
 * Primitive → Semantic → Component / Utility
 *
 * 사용 기준
 * - Primitive: 디자인 시스템의 원본 값
 * - Semantic: 실제 UI에서 사용하는 역할 기반 값
 * - Component CSS에서는 Semantic 변수 사용 권장
 *
 * Typography
 * - Desktop / Mobile 분리
 * - Figma 표기 64/120 → font-size: 64px / line-height: 120%
 * - Caption Medium은 Caption과 사이즈/행간 동일, font-weight만 500
 */

:root {

    /* =========================================================
     01. PRIMITIVE / COLOR
     디자인 시스템의 원본 컬러
     ========================================================= */

    --lc-primitive-color-white: #FFFFFF;

    /* Neutral */
    --lc-primitive-color-neutral-50: #FAFAFB;
    --lc-primitive-color-neutral-100: #F5F7FA;
    --lc-primitive-color-neutral-200: #E6ECF3;
    --lc-primitive-color-neutral-300: #D1D6DB;
    --lc-primitive-color-neutral-400: #B8B8B8;
    --lc-primitive-color-neutral-500: #8B95A1;
    --lc-primitive-color-neutral-600: #6B7684;
    --lc-primitive-color-neutral-700: #58697D;
    --lc-primitive-color-neutral-800: #374147;
    --lc-primitive-color-neutral-900: #191F28;

    /* Heading */
    --lc-primitive-color-heading: #1C2024;

    /* Navy */
    --lc-primitive-color-navy-900: #0B1F36;

    /* Footer */
    --lc-primitive-color-footer: #212121;

    /* Brand Blue */
    --lc-primitive-color-blue-50: #EDF5FF;
    --lc-primitive-color-blue-100: #E6F2FF;
    --lc-primitive-color-blue-500: #3182F6;
    --lc-primitive-color-blue-600: #2F58F9;
    --lc-primitive-color-blue-700: #006BF9;

    /* Etc */
    --lc-primitive-color-lavender-50: #EEF2FF;

    /* Border */
    --lc-primitive-color-border-soft: #DEE5F0;
    --lc-primitive-color-border-strong: #DEE5EE;


    /* =========================================================
     02. PRIMITIVE / SPACE
     Margin, Padding, Gap 등에 사용하는 기본 간격
     ========================================================= */

    --lc-primitive-space-4: 4px;
    --lc-primitive-space-6: 6px;
    --lc-primitive-space-8: 8px;
    --lc-primitive-space-10: 10px;
    --lc-primitive-space-12: 12px;
    --lc-primitive-space-14: 14px;
    --lc-primitive-space-16: 16px;
    --lc-primitive-space-20: 20px;
    --lc-primitive-space-24: 24px;
    --lc-primitive-space-28: 28px;
    --lc-primitive-space-32: 32px;
    --lc-primitive-space-36: 36px;
    --lc-primitive-space-40: 40px;
    --lc-primitive-space-48: 48px;
    --lc-primitive-space-64: 64px;
    --lc-primitive-space-120: 120px;


    /* =========================================================
     03. PRIMITIVE / RADIUS
     ========================================================= */

    --lc-primitive-radius-8: 8px;
    --lc-primitive-radius-12: 12px;
    --lc-primitive-radius-14: 14px;
    --lc-primitive-radius-16: 16px;
    --lc-primitive-radius-20: 20px;

    /* Badge, Chip, Pill */
    --lc-primitive-radius-999: 999px;


    /* =========================================================
     04. PRIMITIVE / LAYOUT
     페이지 및 콘텐츠 기준 사이즈
     ========================================================= */

    /* Desktop */
    --lc-primitive-layout-desktop-page: 1440px;
    --lc-primitive-layout-desktop-container: 1200px;
    --lc-primitive-layout-desktop-gutter: 120px;

    /* Mobile */
    --lc-primitive-layout-mobile-page: 428px;
    --lc-primitive-layout-mobile-gutter: 20px;
    --lc-primitive-layout-mobile-content: 388px;

    /* Header */
    --lc-primitive-layout-header-desktop: 80px;
    --lc-primitive-layout-header-mobile: 64px;

    /* 버튼 등 최소 터치 영역 */
    --lc-primitive-layout-touch-min: 44px;


    /* =========================================================
     05. PRIMITIVE / FONT
     ========================================================= */

    --lc-font-family-product:
        "Pretendard",
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* =========================================================
     06. PRIMITIVE / TYPOGRAPHY — DESKTOP
     Figma Desktop 기준
     ========================================================= */

    /*
   * Display
   * 64 / 120
   */
    --lc-type-size-desktop-display: 64px;
    --lc-type-line-height-desktop-display: 120%;

    /*
   * Section
   * 48 / 140
   */
    --lc-type-size-desktop-section: 48px;
    --lc-type-line-height-desktop-section: 140%;

    /*
   * Heading L
   * 32 / 140
   */
    --lc-type-size-desktop-heading-l: 32px;
    --lc-type-line-height-desktop-heading-l: 140%;

    /*
   * Heading M
   * 28 / 128
   */
    --lc-type-size-desktop-heading-m: 28px;
    --lc-type-line-height-desktop-heading-m: 128%;

    /*
   * Heading S
   * 22 / 140
   */
    --lc-type-size-desktop-heading-s: 22px;
    --lc-type-line-height-desktop-heading-s: 140%;

    /*
   * Title
   * 20 / 140
   */
    --lc-type-size-desktop-title: 20px;
    --lc-type-line-height-desktop-title: 140%;

    /*
   * Body L
   * 18 / 150
   */
    --lc-type-size-desktop-body-l: 18px;
    --lc-type-line-height-desktop-body-l: 150%;

    /*
   * Body M
   * 16 / 150
   */
    --lc-type-size-desktop-body-m: 16px;
    --lc-type-line-height-desktop-body-m: 150%;

    /*
   * Body S
   * 14 / 140
   */
    --lc-type-size-desktop-body-s: 14px;
    --lc-type-line-height-desktop-body-s: 140%;

    /*
   * Caption
   * 12 / 140
   */
    --lc-type-size-desktop-caption: 12px;
    --lc-type-line-height-desktop-caption: 140%;


    /* =========================================================
     07. PRIMITIVE / TYPOGRAPHY — MOBILE
     Figma Mobile 기준
     ========================================================= */

    /*
   * Display
   * 32 / 125
   */
    --lc-type-size-mobile-display: 32px;
    --lc-type-line-height-mobile-display: 125%;

    /*
   * Section
   * 28 / 130
   */
    --lc-type-size-mobile-section: 28px;
    --lc-type-line-height-mobile-section: 130%;

    /*
   * Card
   * 20 / 140
   */
    --lc-type-size-mobile-card: 20px;
    --lc-type-line-height-mobile-card: 140%;

    /*
   * Title
   * 18 / 140
   */
    --lc-type-size-mobile-title: 18px;
    --lc-type-line-height-mobile-title: 140%;

    /*
   * Body
   * 15 / 150
   */
    --lc-type-size-mobile-body: 15px;
    --lc-type-line-height-mobile-body: 150%;

    /*
   * Body S
   * 13 / 145
   */
    --lc-type-size-mobile-body-s: 13px;
    --lc-type-line-height-mobile-body-s: 145%;

    /*
   * Caption
   * 12 / 140
   */
    --lc-type-size-mobile-caption: 12px;
    --lc-type-line-height-mobile-caption: 140%;

    /* Input / Button 등 Control용 */
    --lc-type-line-height-mobile-control: 22px;


    /* =========================================================
     08. SEMANTIC / COLOR
     실제 UI에서는 Primitive보다 이 변수 사용 권장
     ========================================================= */

    /* Background */
    --lc-semantic-color-bg-base:
        var(--lc-primitive-color-white);

    --lc-semantic-color-bg-subtle:
        var(--lc-primitive-color-neutral-100);

    --lc-semantic-color-bg-input:
        var(--lc-primitive-color-neutral-50);

    --lc-semantic-color-bg-footer:
        var(--lc-primitive-color-footer);

    --lc-semantic-color-bg-brand-soft:
        var(--lc-primitive-color-blue-100);


    /* Text */
    --lc-semantic-color-text-primary:
        var(--lc-primitive-color-neutral-900);

    --lc-semantic-color-text-heading:
        var(--lc-primitive-color-heading);

    --lc-semantic-color-text-secondary:
        var(--lc-primitive-color-neutral-600);

    --lc-semantic-color-text-nav:
        var(--lc-primitive-color-neutral-700);

    --lc-semantic-color-text-placeholder:
        var(--lc-primitive-color-neutral-500);

    --lc-semantic-color-text-inverse:
        var(--lc-primitive-color-white);

    --lc-semantic-color-text-footer:
        var(--lc-primitive-color-neutral-200);


    /* Brand */
    --lc-semantic-color-brand-primary:
        var(--lc-primitive-color-blue-600);

    --lc-semantic-color-brand-action:
        var(--lc-primitive-color-blue-700);

    --lc-semantic-color-brand-secondary:
        var(--lc-primitive-color-blue-500);


    /* Border */
    --lc-semantic-color-border-default:
        var(--lc-primitive-color-neutral-200);

    --lc-semantic-color-border-input:
        var(--lc-primitive-color-neutral-300);

    --lc-semantic-color-border-soft:
        var(--lc-primitive-color-border-soft);


    /* Icon */
    --lc-semantic-color-icon-primary:
        var(--lc-primitive-color-neutral-900);


    /* =========================================================
     09. SEMANTIC / SPACE
     ========================================================= */

    /* 범용 Space */
    --lc-space-4: var(--lc-primitive-space-4);
    --lc-space-6: var(--lc-primitive-space-6);
    --lc-space-8: var(--lc-primitive-space-8);
    --lc-space-10: var(--lc-primitive-space-10);
    --lc-space-12: var(--lc-primitive-space-12);
    --lc-space-14: var(--lc-primitive-space-14);
    --lc-space-16: var(--lc-primitive-space-16);
    --lc-space-20: var(--lc-primitive-space-20);
    --lc-space-24: var(--lc-primitive-space-24);
    --lc-space-28: var(--lc-primitive-space-28);
    --lc-space-32: var(--lc-primitive-space-32);
    --lc-space-36: var(--lc-primitive-space-36);
    --lc-space-40: var(--lc-primitive-space-40);
    --lc-space-48: var(--lc-primitive-space-48);
    --lc-space-64: var(--lc-primitive-space-64);
    --lc-space-120: var(--lc-primitive-space-120);


    /* Component 내부 간격 */
    --lc-semantic-space-component-xs:
        var(--lc-primitive-space-6);

    --lc-semantic-space-component-sm:
        var(--lc-primitive-space-8);

    --lc-semantic-space-component-md:
        var(--lc-primitive-space-12);

    --lc-semantic-space-component-lg:
        var(--lc-primitive-space-16);


    /* Card 내부 요소 간격 */
    --lc-semantic-space-card-gap:
        var(--lc-primitive-space-14);


    /* 콘텐츠 그룹 간격 */
    --lc-semantic-space-content-gap:
        var(--lc-primitive-space-36);


    /* Desktop 섹션 상하 간격 */
    --lc-semantic-space-section-y-desktop:
        var(--lc-primitive-space-64);


    /* Desktop 좌우 페이지 여백 */
    --lc-semantic-space-page-gutter-desktop:
        var(--lc-primitive-space-120);


    /* Mobile 좌우 페이지 여백 */
    --lc-semantic-space-page-gutter-mobile:
        var(--lc-primitive-space-20);


    /* Mobile 섹션 상하 간격 */
    --lc-semantic-space-section-y-mobile:
        var(--lc-primitive-space-48);


    /* =========================================================
     10. SEMANTIC / RADIUS
     ========================================================= */

    --lc-semantic-radius-button:
        var(--lc-primitive-radius-8);

    --lc-semantic-radius-input:
        var(--lc-primitive-radius-12);

    --lc-semantic-radius-card-sm:
        var(--lc-primitive-radius-14);

    --lc-semantic-radius-card:
        var(--lc-primitive-radius-16);

    --lc-semantic-radius-card-lg:
        var(--lc-primitive-radius-20);

    --lc-semantic-radius-pill:
        var(--lc-primitive-radius-999);


    /* =========================================================
     11. SEMANTIC / LAYOUT
     ========================================================= */

    --lc-semantic-layout-page-desktop:
        var(--lc-primitive-layout-desktop-page);

    --lc-semantic-layout-container-desktop:
        var(--lc-primitive-layout-desktop-container);

    --lc-semantic-layout-page-mobile:
        var(--lc-primitive-layout-mobile-page);

    --lc-semantic-layout-content-mobile:
        var(--lc-primitive-layout-mobile-content);

    --lc-semantic-layout-touch-min:
        var(--lc-primitive-layout-touch-min);

    --lc-semantic-layout-header-desktop:
        var(--lc-primitive-layout-header-desktop);

    --lc-semantic-layout-header-mobile:
        var(--lc-primitive-layout-header-mobile);


    /* =========================================================
     12. SEMANTIC / TYPOGRAPHY
     ========================================================= */

    --lc-type-font-family-product:
        var(--lc-font-family-product);


    /* Desktop */

    --lc-type-desktop-display-size:
        var(--lc-type-size-desktop-display);

    --lc-type-desktop-display-line-height:
        var(--lc-type-line-height-desktop-display);


    --lc-type-desktop-section-size:
        var(--lc-type-size-desktop-section);

    --lc-type-desktop-section-line-height:
        var(--lc-type-line-height-desktop-section);


    --lc-type-desktop-heading-l-size:
        var(--lc-type-size-desktop-heading-l);

    --lc-type-desktop-heading-l-line-height:
        var(--lc-type-line-height-desktop-heading-l);


    --lc-type-desktop-heading-m-size:
        var(--lc-type-size-desktop-heading-m);

    --lc-type-desktop-heading-m-line-height:
        var(--lc-type-line-height-desktop-heading-m);


    --lc-type-desktop-heading-s-size:
        var(--lc-type-size-desktop-heading-s);

    --lc-type-desktop-heading-s-line-height:
        var(--lc-type-line-height-desktop-heading-s);


    --lc-type-desktop-title-size:
        var(--lc-type-size-desktop-title);

    --lc-type-desktop-title-line-height:
        var(--lc-type-line-height-desktop-title);


    --lc-type-desktop-body-l-size:
        var(--lc-type-size-desktop-body-l);

    --lc-type-desktop-body-l-line-height:
        var(--lc-type-line-height-desktop-body-l);


    --lc-type-desktop-body-m-size:
        var(--lc-type-size-desktop-body-m);

    --lc-type-desktop-body-m-line-height:
        var(--lc-type-line-height-desktop-body-m);


    --lc-type-desktop-body-s-size:
        var(--lc-type-size-desktop-body-s);

    --lc-type-desktop-body-s-line-height:
        var(--lc-type-line-height-desktop-body-s);


    --lc-type-desktop-caption-size:
        var(--lc-type-size-desktop-caption);

    --lc-type-desktop-caption-line-height:
        var(--lc-type-line-height-desktop-caption);


    /* Mobile */

    --lc-type-mobile-display-size:
        var(--lc-type-size-mobile-display);

    --lc-type-mobile-display-line-height:
        var(--lc-type-line-height-mobile-display);


    --lc-type-mobile-section-size:
        var(--lc-type-size-mobile-section);

    --lc-type-mobile-section-line-height:
        var(--lc-type-line-height-mobile-section);


    --lc-type-mobile-card-size:
        var(--lc-type-size-mobile-card);

    --lc-type-mobile-card-line-height:
        var(--lc-type-line-height-mobile-card);


    --lc-type-mobile-title-size:
        var(--lc-type-size-mobile-title);

    --lc-type-mobile-title-line-height:
        var(--lc-type-line-height-mobile-title);


    --lc-type-mobile-body-size:
        var(--lc-type-size-mobile-body);

    --lc-type-mobile-body-line-height:
        var(--lc-type-line-height-mobile-body);


    --lc-type-mobile-body-s-size:
        var(--lc-type-size-mobile-body-s);

    --lc-type-mobile-body-s-line-height:
        var(--lc-type-line-height-mobile-body-s);


    --lc-type-mobile-caption-size:
        var(--lc-type-size-mobile-caption);

    --lc-type-mobile-caption-line-height:
        var(--lc-type-line-height-mobile-caption);
}


/* =========================================================
   13. RESET / BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--lc-type-font-family-product);

    color:
        var(--lc-semantic-color-text-primary);

    background:
        var(--lc-semantic-color-bg-base);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

body {
    margin: 0;

    font-family: inherit;

    /*
   * 기본 본문
   * Desktop Body M
   */
    font-size:
        var(--lc-type-desktop-body-m-size);

    line-height:
        var(--lc-type-desktop-body-m-line-height);

    color:
        var(--lc-semantic-color-text-primary);

    background:
        var(--lc-semantic-color-bg-base);
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}


/* =========================================================
   14. LAYOUT
   ========================================================= */

/*
 * Desktop Content Container
 *
 * 기준
 * - 전체 1440
 * - 콘텐츠 1200
 * - 좌우 120
 */
.lc-container {
    width: min(calc(100% - (var(--lc-semantic-space-page-gutter-desktop) * 2)),
            var(--lc-semantic-layout-container-desktop));

    margin-inline: auto;
}


/*
 * 일반 Section
 */
.lc-section {
    padding-block:
        var(--lc-semantic-space-section-y-desktop);
}


/*
 * 세로 콘텐츠 묶음
 */
.lc-stack {
    display: flex;
    flex-direction: column;

    gap:
        var(--lc-semantic-space-content-gap);
}


/* =========================================================
   15. TYPOGRAPHY UTILITIES — DESKTOP
   ========================================================= */


/*
 * Display
 * 64 / 120
 *
 * 메인 Hero 제목 등
 */
.lc-display {
    font-size:
        var(--lc-type-desktop-display-size);

    line-height:
        var(--lc-type-desktop-display-line-height);

    font-weight: 700;
    letter-spacing: -0.03em;
}


/*
 * Section
 * 48 / 140
 *
 * 주요 Section Title
 */
.lc-section-title {
    font-size:
        var(--lc-type-desktop-section-size);

    line-height:
        var(--lc-type-desktop-section-line-height);

    font-weight: 700;
    letter-spacing: -0.025em;
}


/*
 * Heading L
 * 32 / 140
 */
.lc-heading-l {
    font-size:
        var(--lc-type-desktop-heading-l-size);

    line-height:
        var(--lc-type-desktop-heading-l-line-height);

    font-weight: 700;
    letter-spacing: -0.02em;
}


/*
 * Heading M
 * 28 / 128
 */
.lc-heading-m {
    font-size:
        var(--lc-type-desktop-heading-m-size);

    line-height:
        var(--lc-type-desktop-heading-m-line-height);

    font-weight: 700;
    letter-spacing: -0.02em;
}


/*
 * Heading S
 * 22 / 140
 */
.lc-heading-s {
    font-size:
        var(--lc-type-desktop-heading-s-size);

    line-height:
        var(--lc-type-desktop-heading-s-line-height);

    font-weight: 700;
    letter-spacing: -0.015em;
}


/*
 * Title
 * 20 / 140
 */
.lc-title {
    font-size:
        var(--lc-type-desktop-title-size);

    line-height:
        var(--lc-type-desktop-title-line-height);

    font-weight: 600;
}


/*
 * Card Title
 *
 * Desktop에서는 Title 20/140
 * Mobile에서는 Card 20/140으로 전환
 */
.lc-card-title {
    font-size:
        var(--lc-type-desktop-title-size);

    line-height:
        var(--lc-type-desktop-title-line-height);

    font-weight: 600;
}


/*
 * Body L
 * 18 / 150
 */
.lc-body-l {
    font-size:
        var(--lc-type-desktop-body-l-size);

    line-height:
        var(--lc-type-desktop-body-l-line-height);

    font-weight: 400;
}


/*
 * Body M
 * 16 / 150
 */
.lc-body-m {
    font-size:
        var(--lc-type-desktop-body-m-size);

    line-height:
        var(--lc-type-desktop-body-m-line-height);

    font-weight: 400;
}


/*
 * Body S
 * 14 / 140
 */
.lc-body-s {
    font-size:
        var(--lc-type-desktop-body-s-size);

    line-height:
        var(--lc-type-desktop-body-s-line-height);

    font-weight: 400;
}


/*
 * Caption
 * 12 / 140
 */
.lc-caption {
    font-size:
        var(--lc-type-desktop-caption-size);

    line-height:
        var(--lc-type-desktop-caption-line-height);

    font-weight: 400;
}


/*
 * Caption Medium
 * 12 / 140
 *
 * Caption과 동일한 크기 / 행간
 * Weight만 Medium
 */
.lc-caption-medium {
    font-size:
        var(--lc-type-desktop-caption-size);

    line-height:
        var(--lc-type-desktop-caption-line-height);

    font-weight: 500;
}


/* =========================================================
   16. FOUNDATION COMPONENTS
   ========================================================= */


/*
 * 기본 Button
 */
.lc-button {
    min-height:
        var(--lc-semantic-layout-touch-min);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        var(--lc-semantic-space-component-sm);

    padding:
        var(--lc-semantic-space-component-md) var(--lc-semantic-space-component-lg);

    border: 0;

    border-radius:
        var(--lc-semantic-radius-button);

    background:
        var(--lc-semantic-color-brand-primary);

    color:
        var(--lc-semantic-color-text-inverse);

    cursor: pointer;
}


/*
 * 기본 Input
 */
.lc-input {
    min-height:
        var(--lc-semantic-layout-touch-min);

    width: 100%;

    padding:
        var(--lc-semantic-space-component-md) var(--lc-semantic-space-component-lg);

    border:
        1px solid var(--lc-semantic-color-border-input);

    border-radius:
        var(--lc-semantic-radius-input);

    background:
        var(--lc-semantic-color-bg-input);

    color:
        var(--lc-semantic-color-text-primary);

    outline: none;
}


/*
 * Input Placeholder
 */
.lc-input::placeholder {
    color:
        var(--lc-semantic-color-text-placeholder);
}


/*
 * Input Focus
 */
.lc-input:focus {
    border-color:
        var(--lc-semantic-color-brand-primary);
}


/*
 * 기본 Card
 */
.lc-card {
    padding:
        var(--lc-semantic-space-component-lg);

    border:
        1px solid var(--lc-semantic-color-border-default);

    border-radius:
        var(--lc-semantic-radius-card);

    background:
        var(--lc-semantic-color-bg-base);
}


/* =========================================================
   17. MOBILE
   767px 이하
   ========================================================= */

@media (max-width: 767px) {

    /*
   * Body 기본값
   * Mobile Body
   * 15 / 150
   */
    body {
        font-size:
            var(--lc-type-mobile-body-size);

        line-height:
            var(--lc-type-mobile-body-line-height);
    }


    /*
   * Mobile Container
   *
   * 좌우 20px
   * 최대 Content 388px
   */
    .lc-container {
        width:
            calc(100% - (var(--lc-semantic-space-page-gutter-mobile) * 2));

        max-width:
            var(--lc-semantic-layout-content-mobile);
    }


    /*
   * Mobile Section
   */
    .lc-section {
        padding-block:
            var(--lc-semantic-space-section-y-mobile);
    }


    /*
   * Display
   * 32 / 125
   */
    .lc-display {
        font-size:
            var(--lc-type-mobile-display-size);

        line-height:
            var(--lc-type-mobile-display-line-height);
    }


    /*
   * Section
   * 28 / 130
   */
    .lc-section-title {
        font-size:
            var(--lc-type-mobile-section-size);

        line-height:
            var(--lc-type-mobile-section-line-height);
    }


    /*
   * Mobile에는 Heading L/M/S 스타일이 별도 존재하지 않으므로
   * Card 20/140 기준으로 축소
   */
    .lc-heading-l,
    .lc-heading-m,
    .lc-heading-s {
        font-size:
            var(--lc-type-mobile-card-size);

        line-height:
            var(--lc-type-mobile-card-line-height);
    }


    /*
   * Title
   * 18 / 140
   */
    .lc-title {
        font-size:
            var(--lc-type-mobile-title-size);

        line-height:
            var(--lc-type-mobile-title-line-height);
    }


    /*
   * Card
   * 20 / 140
   */
    .lc-card-title {
        font-size:
            var(--lc-type-mobile-card-size);

        line-height:
            var(--lc-type-mobile-card-line-height);
    }


    /*
   * Body
   * 15 / 150
   *
   * Desktop Body L / M → Mobile Body
   */
    .lc-body-l,
    .lc-body-m {
        font-size:
            var(--lc-type-mobile-body-size);

        line-height:
            var(--lc-type-mobile-body-line-height);
    }


    /*
   * Body S
   * 13 / 145
   */
    .lc-body-s {
        font-size:
            var(--lc-type-mobile-body-s-size);

        line-height:
            var(--lc-type-mobile-body-s-line-height);
    }


    /*
   * Caption / Caption Medium
   * 12 / 140
   */
    .lc-caption,
    .lc-caption-medium {
        font-size:
            var(--lc-type-mobile-caption-size);

        line-height:
            var(--lc-type-mobile-caption-line-height);
    }
}