/* 진행 사례(lp-cases.php) 전용 — 기존 진행 사례 카드·필터 CSS(reference_style.css)가 쓰는 디자인 시스템 토큰.
   global-style.css 를 통째로 불러오면 전역 * 규칙(글꼴·스크롤바 숨김)이 랜딩 전체에 번지므로, :root 토큰만 이 페이지 범위로 옮겨 온다.
   원본: www/css/global-style.css :root (토큰 값이 바뀌면 함께 갱신) */
[data-page="cases"] {
    --primary-color: var(--color-cyan-500);
    --pink-100-color: var(--color-accent-default);
    --border-round-M: var(--radius-8);
    --border-round-L: var(--radius-10);
    --border-color: var(--color-border-default);
    --line-color: var(--color-border-default);
    --bg-gray: var(--color-surface-subtle);
    --gradient-color: var(--gradient-cta-accent-magenta);
    --gradient-primary: var(--gradient-cta-accent-magenta);
    --cta-gradient: var(--gradient-cta-accent-magenta);
    --cta-gradient-blue: var(--gradient-cta-accent-blue);
    --infl-primary-color: var(--color-cyan-500);
    --theme-color: var(--color-cyan-400);
    --border-round-S: var(--radius-6);
    --standard-radius: var(--radius-16);
    --bg-gray-color: var(--color-surface-subtle);
    --bg-sky: var(--color-surface-brand-subtle);
    --disabled-font-color: var(--color-content-disabled);
    --infl-accent-color: #F7E948;
    --red-color: #FE6F61;
    --red-100-color: #FF6262;
    --red-200-color: #FF8B8B;
    --accent-color: #F7E948;
    --accent-color:#FFCB57;
    --yellow-color:#F7E847;
    --blue-color:#3969EF;
    --theme-bg-color: #F8F8FA;
    --theme-font-color: #444C67;
    --disabled-gray-color:#D2D2DF;
    --disabled-status-color:#D2D2DF;
    --navy-color:#454D56;
    --gray-font-color:#454D56;
    --box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    --box-shadow_black: 3px 3px 4px rgba(0, 0, 0, 0.25);
    --bg-yellow: #FFF8E7;
    --bg-red: #FFF6F5;
    --bg-red-100: #FFE8E8;
    --gradient-hover-color: linear-gradient(98deg, #2E97A3 32.37%, #F7E847 114.35%);
    --placeholder-color: #B7BECD;
    --gradient-primary-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, var(--color-cyan-500) 0%, #DA2872 100%);
    --cta-gradient-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, var(--color-cyan-500) 0%, #DA2872 100%);
    --gradient-banner-color : radial-gradient(ellipse 87.78% 126.52% at 18.75% -26.52%, rgba(60, 203, 219, 0.25) 0%, rgba(60, 203, 219, 0) 66.3%), radial-gradient(ellipse 51.78% 106.84% at 102.5% 111.6%, rgba(255, 107, 168, 0.25) 0%, rgba(255, 107, 168, 0) 100%), radial-gradient(ellipse 55.31% 83.79% at -1.56% 100%, rgba(255, 178, 154, 0.15) 0%, rgba(255, 178, 154, 0) 100%);
    --cta-gradient-blue-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3C91DB 0%, #DA2872 100%);
    --headline-l-size: 56px;
    --headline-l-line: 64px;
    --headline-l-letter: -1.5px;
    --headline-m-size: 48px;
    --headline-m-line: 56px;
    --headline-m-letter: -1.5px;
    --headline-s-size: 40px;
    --headline-s-line: 48px;
    --headline-s-letter: -1.5px;
    --title-l-size: 36px;
    --title-l-line: 44px;
    --title-l-letter: -1px;
    --title-m-size: 30px;
    --title-m-line: 40px;
    --title-m-letter: -1px;
    --title-s-size: 24px;
    --title-s-line: 32px;
    --title-s-letter: -0.5px;
    --title-xs-size: 20px;
    --title-xs-line: 28px;
    --title-xs-letter: -0.5px;
    --body-l-size: 18px;
    --body-l-line: 24px;
    --body-l-letter: -0.5px;
    --color-cyan-50: #EEF9FA;
    --color-cyan-100: #D4F1F4;
    --color-cyan-200: #A9E3E9;
    --color-cyan-300: #72CFDA;
    --color-cyan-400: #3FBFCC;
    --color-cyan-500: #36B7C5;
    --color-cyan-600: #1AACBC;
    --color-cyan-700: #258FA0;
    --color-cyan-800: #1F7A87;
    --color-cyan-850: #165A64;
    --color-cyan-900: #0F4A55;
    --color-neutral-0: #FFFFFF;
    --color-neutral-25: #FBFBFC;
    --color-neutral-50: #F7F8F9;
    --color-neutral-100: #F0F1F3;
    --color-neutral-200: #E4E6EA;
    --color-neutral-300: #C9CDD4;
    --color-neutral-400: #A0A7B4;
    --color-neutral-500: #72798A;
    --color-neutral-600: var(--color-content-default);
    --color-neutral-700: #333C4D;
    --color-neutral-800: #1E2534;
    --color-neutral-900: #111827;
    --color-neutral-1000: #000000;
    --color-red-50: #FEF2F2;
    --color-red-100: #FEE2E2;
    --color-red-500: #EF4444;
    --color-red-600: #DC2626;
    --color-green-50: #F0FDF4;
    --color-green-100: #DCFCE7;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-pink-50: #FFF7FA;
    --color-pink-100: #FDE8F1;
    --color-pink-500: #DA2872;
    --color-orange-50: #FFF8E1;
    --color-orange-100: #FFEEB7;
    --color-orange-500: #FF9E3C;
    --color-orange-700: #E65100;
    --color-content-strong: var(--color-neutral-800);
    --color-content-default: var(--color-neutral-700);
    --color-content-subtle: var(--color-neutral-500);
    --color-content-muted: var(--color-neutral-400);
    --color-content-faint: var(--color-neutral-300);
    --color-content-disabled: var(--color-neutral-300);
    --color-content-inverse: var(--color-neutral-0);
    --color-content-brand: var(--color-cyan-600);
    --color-surface-default: var(--color-neutral-0);
    --color-surface-wash: var(--color-neutral-25);
    --color-surface-subtle: var(--color-neutral-50);
    --color-surface-muted: var(--color-neutral-100);
    --color-surface-strong: var(--color-neutral-200);
    --color-surface-inverse: var(--color-neutral-800);
    --color-surface-brand: var(--color-cyan-500);
    --color-surface-brand-subtle: var(--color-cyan-50);
    --color-surface-brand-muted: var(--color-cyan-100);
    --color-border-default: var(--color-neutral-200);
    --color-border-subtle: var(--color-neutral-100);
    --color-border-strong: var(--color-neutral-300);
    --color-border-focus: var(--color-cyan-500);
    --color-border-brand: var(--color-cyan-500);
    --color-border-brand-subtle: var(--color-cyan-200);
    --color-border-error: var(--color-red-500);
    --color-border-error-subtle: var(--color-red-100);
    --color-border-disabled: var(--color-neutral-200);
    --color-status-success-default: var(--color-green-500);
    --color-status-success-subtle: var(--color-green-50);
    --color-status-success-muted: var(--color-green-100);
    --color-status-success-content: var(--color-green-600);
    --color-status-error-default: var(--color-red-500);
    --color-status-error-subtle: var(--color-red-50);
    --color-status-error-muted: var(--color-red-100);
    --color-status-error-content: var(--color-red-600);
    --color-status-caution-default: var(--color-orange-500);
    --color-status-caution-subtle: var(--color-orange-50);
    --color-status-caution-muted: var(--color-orange-100);
    --color-status-caution-content: var(--color-orange-700);
    --color-accent-default: var(--color-pink-500);
    --color-accent-weak: var(--color-pink-100);
    --color-accent-subtle: var(--color-pink-50);
    --color-overlay-hover: rgba(0, 0, 0, 0.20);
    --color-overlay-pressed: rgba(0, 0, 0, 0.40);
    --gradient-cta-accent-magenta: linear-gradient(90deg, #36B7C5 0%, #DA2872 100%);
    --gradient-cta-accent-blue: linear-gradient(135deg, #7857F0 0%, #36B7C5 100%);
    --gradient-bg-subtle: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
    --gradient-bg-weak: radial-gradient(110.03% 67.1% at 5.87% 97.04%, rgba(54, 183, 197, 0.15) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(104.44% 42.41% at 100% 0%, rgba(54, 183, 197, 0.15) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
    --gradient-surface-inverse: linear-gradient(90deg, #454D56 0%, #325782 100%);
    --label-r-size: 12px;
    --label-r-line: 20px;
    --label-r-letter: -0.5px;
    --label-r-weight: 500;
    --label-m-size: 12px;
    --label-m-line: 20px;
    --label-m-letter: -0.5px;
    --label-m-weight: 500;
    --body-r-size: 14px;
    --body-r-line: 22px;
    --body-r-letter: -0.5px;
    --body-r-weight: 400;
    --headline-size: 36px;
    --headline-line: 44px;
    --headline-letter: -1px;
    --headline-weight: 700;
    --headline-l-size: 56px;
    --headline-l-line: 64px;
    --headline-l-letter: -1.5px;
    --headline-m-size: 48px;
    --headline-m-line: 56px;
    --headline-m-letter: -1.5px;
    --headline-s-size: 40px;
    --headline-s-line: 48px;
    --headline-s-letter: -1.5px;
    --title-l-size: 36px;
    --title-l-line: 44px;
    --title-l-weight: 700;
    --title-l-letter: -1px;
    --title-m-size: 30px;
    --title-m-line: 40px;
    --title-m-weight: 600;
    --title-m-letter: -1px;
    --title-s-size: 24px;
    --title-s-line: 32px;
    --title-s-weight: 600;
    --title-s-letter: -0.5px;
    --title-xs-size: 20px;
    --title-xs-line: 28px;
    --title-xs-weight: 600;
    --title-xs-letter: -0.5px;
    --body-l-size: 18px;
    --body-l-line: 24px;
    --body-l-weight: 500;
    --body-l-letter: -0.5px;
    --body-m-size: 16px;
    --body-m-line: 24px;
    --body-m-weight: 500;
    --body-m-letter: -0.5px;
    --body-s-size: 14px;
    --body-s-line: 22px;
    --body-s-weight: 400;
    --body-s-letter: -0.5px;
    --caption-m-size: 12px;
    --caption-m-line: 20px;
    --caption-m-weight: 500;
    --caption-m-letter: -0.5px;
    --caption-s-size: 10px;
    --caption-s-line: 10px;
    --caption-s-weight: 500;
    --caption-s-letter: -0.5px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --spacing-108: 108px;
    --radius-0: 0px;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-18: 18px;
    --radius-20: 20px;
    --radius-22: 22px;
    --radius-24: 24px;
    --radius-full: 9999px;
    --color-text-inverse: var(--color-neutral-0);
    --color-text-strong: var(--color-neutral-800);
    --color-text-medium: var(--color-neutral-600);
    --color-text-soft: var(--color-neutral-500);
    --color-text-disabled: var(--color-neutral-300);
    --color-text-primary: var(--color-cyan-600);
    --color-text-error: var(--color-red-600);
    --color-border-weak: var(--color-neutral-100);
    --color-border-medium: var(--color-neutral-300);
    --color-border-error-weak: var(--color-red-100);
    --color-primary-300: var(--color-cyan-100);
    --color-primary-500: var(--color-cyan-500);
    --color-primary-700: var(--color-cyan-700);
    --color-primary-900: var(--color-cyan-900);
    --color-primary: var(--color-primary-500);
    --color-primary-weak: var(--color-primary-300);
    --color-primary-dark: var(--color-primary-700);
    --color-primary-deep: var(--color-primary-900);
    --color-point-500: var(--color-pink-500);
    --color-point-300: var(--color-pink-50);
    --color-point: var(--color-point-500);
    --color-point-weak: var(--color-point-300);
    --surface-gray-weak: var(--color-neutral-25);
    --surface-gray: var(--color-neutral-50);
    --surface-disabled: var(--color-neutral-100);
    --surface-dark: #454D56;
    --surface-error: var(--color-red-600);
    --surface-white: var(--color-neutral-0);
    --surface-translucent-30: rgba(255, 255, 255, 0.3);
    --surface-translucent-50: rgba(255, 255, 255, 0.5);
    --surface-dim-20: rgba(0, 0, 0, 0.2);
    --background-gray-weak: #FAFAFA;
    --font-family-base: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI",
  Roboto, "Apple SD Gothic Neo", sans-serif;
    --font-family-base: "Pretendard", -apple-system, system-ui, "Segoe UI",
  Roboto, "Apple SD Gothic Neo", sans-serif;
    --font-headline-l-bold:     normal 700 var(--headline-l-size) / var(--headline-l-line) var(--font-family-base);
    --font-headline-l-semibold: normal 600 var(--headline-l-size) / var(--headline-l-line) var(--font-family-base);
    --font-headline-m-bold:     normal 700 var(--headline-m-size) / var(--headline-m-line) var(--font-family-base);
    --font-headline-m-semibold: normal 600 var(--headline-m-size) / var(--headline-m-line) var(--font-family-base);
    --font-headline-s-bold:     normal 700 var(--headline-s-size) / var(--headline-s-line) var(--font-family-base);
    --font-headline-s-semibold: normal 600 var(--headline-s-size) / var(--headline-s-line) var(--font-family-base);
    --font-title-l-bold:     normal 700 var(--title-l-size) / var(--title-l-line) var(--font-family-base);
    --font-title-l-semibold: normal 600 var(--title-l-size) / var(--title-l-line) var(--font-family-base);
    --font-title-m:          normal 600 var(--title-m-size) / var(--title-m-line) var(--font-family-base);
    --font-title-s:          normal 600 var(--title-s-size) / var(--title-s-line) var(--font-family-base);
    --font-title-xs:         normal 600 var(--title-xs-size) / var(--title-xs-line) var(--font-family-base);
    --font-body-l-semibold: normal 600 var(--body-l-size) / var(--body-l-line) var(--font-family-base);
    --font-body-l-medium:   normal 500 var(--body-l-size) / var(--body-l-line) var(--font-family-base);
    --font-body-l-regular:  normal 400 var(--body-l-size) / var(--body-l-line) var(--font-family-base);
    --font-body-l:          var(--font-body-l-medium);
    --font-body-m-semibold: normal 600 var(--body-m-size) / var(--body-m-line) var(--font-family-base);
    --font-body-m-medium:   normal 500 var(--body-m-size) / var(--body-m-line) var(--font-family-base);
    --font-body-m-regular:  normal 400 var(--body-m-size) / var(--body-m-line) var(--font-family-base);
    --font-body-s-semibold: normal 600 var(--body-s-size) / var(--body-s-line) var(--font-family-base);
    --font-body-s-medium:   normal 500 var(--body-s-size) / var(--body-s-line) var(--font-family-base);
    --font-body-s-regular:  normal 400 var(--body-s-size) / var(--body-s-line) var(--font-family-base);
    --font-caption-m: normal 500 var(--caption-m-size) / var(--caption-m-line) var(--font-family-base);
    --font-caption-s: normal 500 var(--caption-s-size) / var(--caption-s-line) var(--font-family-base);
}
@media (max-width: 1184px) {
  [data-page="cases"] {
    --headline-l-size: 40px;
    --headline-l-line: 48px;
    --headline-m-size: 36px;
    --headline-m-line: 44px;
    --headline-s-size: 32px;
    --headline-s-line: 40px;
    --title-l-size: 28px;
    --title-l-line: 36px;
    --title-m-size: 24px;
    --title-m-line: 32px;
    --title-s-size: 20px;
    --title-s-line: 28px;
    --title-xs-size: 18px;
    --title-xs-line: 24px;
  }
}