/**
 * MUAH homepage renewal — design tokens from Figma (2026)
 * Scope with body.renewal or .renewal-scope to avoid breaking legacy pages.
 */
body.renewal,
.renewal-scope {
  /* Brand */
  --muah-black: #000000;
  --muah-white: #ffffff;
  --muah-brand: #6800a6;
  --muah-header-cta-hover: #503de0;
  --muah-brand-5: rgba(104, 0, 166, 0.05);
  --muah-brand-45: rgba(104, 0, 166, 0.45);
  /* Section badge (Figma — 핵심 기능 등 공통) */
  --muah-badge-bg: rgba(255, 223, 205, 0.5);
  --muah-badge-text: rgba(177, 24, 0, 0.5);
  /* 08 news badge — #EDD8FA 50% / #6800A6 50% */
  --muah-news-badge-bg: rgba(237, 216, 250, 0.5);
  --muah-news-badge-text: rgba(104, 0, 166, 0.5);
  /* 07 install badge — #F5E8D0 50% / #795F30 50% */
  --muah-install-badge-bg: rgba(245, 232, 208, 0.5);
  --muah-install-badge-text: rgba(121, 95, 48, 0.5);
  /* 06 welfare badge — #ffffff 50% / #1f1f1f */
  --muah-welfare-badge-bg: rgba(255, 255, 255, 0.5);
  --muah-welfare-badge-text: #1f1f1f;
  --muah-cta-brochure: #503de0;
  /* 09 brochure — 마케팅 동의 ~버튼 20px, 섹션 하단 ~푸터 20px (Figma 133:775) */
  --muah-brochure-agree-gap: 20px;
  --muah-brochure-pad-bottom: 220px;

  /* Text */
  --muah-text: #222a38;
  --muah-text-rgb: 34, 42, 56;
  --muah-text-muted: rgba(var(--muah-text-rgb), 0.5);
  --muah-text-nav: #2c2c2c;
  --muah-text-hero-sub: rgba(255, 255, 255, 0.9);

  /* Surfaces */
  --muah-bg-page: #ffffff;
  --muah-bg-section: #faf9fa;
  --muah-news-bg: #fcfafc;
  --muah-news-thumb-radius: 12px;
  --muah-news-thumb-border: rgba(164, 164, 165, 0.25);
  --muah-news-tag-color: rgba(164, 164, 165, 0.8);
  --muah-border: rgba(164, 164, 165, 0.25);
  --muah-gray-01: #f4f4f4;
  --muah-gray-02: rgba(164, 164, 165, 0.8);

  /* 04 org (Figma 131:188 — Rectangle 562, 252px) */
  --muah-org-sky: #d6f2ff;
  --muah-org-sky-deep: #83d1f5;
  /* ↓ 이 값으로 흰색→하늘색 페이드 높이 조절 */
  --muah-org-top-fade-h: 252px;
  --muah-org-bg: linear-gradient(
    180deg,
    #ffffff 0,
    rgba(214, 242, 255, 0) var(--muah-org-top-fade-h)
  ),
  linear-gradient(180deg, var(--muah-org-sky) 0%, var(--muah-org-sky-deep) 100%);

  /* 05 emotion — 이미지 하단 페이드 (Figma ~76.52px, #83CBEC 46% → #CEF0FF 0%) */
  --muah-emotion-bottom-fade-h: 76.52px;
  /* 05/06 dashboard image — PC (Figma 1280×673 @ left 320) */
  --muah-dashboard-img-w: 1280px;
  --muah-dashboard-img-h: 628px;
  --muah-dashboard-img-aspect: 1280 / 628;
  /* PC: 상단 radius만 (하단은 직각) */
  --muah-emotion-img-radius-pc: 33px 33px 0 0;
  --muah-welfare-img-radius-pc: 33px 33px 0 0;
  --muah-emotion-title-color: #222a38;
  --muah-emotion-body-color: rgba(34, 42, 56, 0.8);
  --muah-emotion-body-size: 21px;
  --muah-emotion-body-lh: 34px;
  --muah-emotion-pc-block-gap: 67px;
  --muah-emotion-bottom-fade-grad: linear-gradient(
    0deg,
    rgba(131, 203, 236, 0.46) 0%,
    rgba(206, 240, 255, 0) 100%
  );

  /* 07 install card — Figma Rectangle 557 + Layer blur 50px */
  --muah-install-fade-h: 230px;
  --muah-install-radius: 25px;
  --muah-install-card-w: 616px;
  --muah-install-card-h: 610px;
  --muah-feature-col-gap: 192px;
  --muah-feature-step: 18px;
  --muah-feature-step-lh: 20px;
  --muah-feature-step-pad-y: 8px;
  --muah-feature-step-pad-x: 15px;
  --muah-feature-step-color: rgba(34, 42, 56, 0.6);
  --muah-feature-body-pc: 24px;
  --muah-feature-body-pc-lh: 38px;
  --muah-feature-body-pc-color: rgba(34, 42, 56, 0.7);
  /* EN PC — Figma 884-57 / 884-211 */
  --muah-en-feature-title-pc: 38px;
  --muah-en-feature-title-pc-lh: 60px;
  --muah-install-1-grad: linear-gradient(
    180deg,
    rgba(183, 144, 99, 1) 42%,
    rgba(183, 144, 99, 0) 100%
  );
  --muah-install-2-grad: linear-gradient(
    180deg,
    rgba(140, 115, 87, 1) 42%,
    rgba(140, 115, 87, 0) 100%
  );
  --muah-install-3-grad: linear-gradient(
    180deg,
    rgba(99, 80, 67, 1) 42%,
    rgba(99, 80, 67, 0) 100%
  );
  --muah-install-4-grad: linear-gradient(
    180deg,
    rgba(62, 153, 199, 1) 42%,
    rgba(44, 167, 200, 0) 100%
  );

  /* Hero — 615px black + 1080px photo (Figma) */
  --muah-hero-black-h: 615px;
  --muah-hero-copy-offset: 72px;
  /* Figma 1920 — hero copy inset 230px each side → 1460px text area */
  --muah-hero-copy-max-w: 1460px;
  --muah-hero-copy-pad-x: max(24px, calc((100vw - var(--muah-hero-copy-max-w)) / 2));
  --muah-hero-sticky-gap: 230px;
  /* 데스크톱: 이미지 원본 비율(1920×1588) */
  --muah-hero-photo-aspect: 1920 / 1588;
  /* 모바일 Figma nC5AH7dD — MO_메인페이지 576:18 → 1:11 (370×11674) */
  --muah-hero-mobile-w: 370;
  --muah-hero-mobile-h: 815;
  /* 모바일 히어로 — Figma nC5AH7dD 1:12 (370×685.34 프레임) */
  --muah-hero-mobile-photo-w: 370;
  --muah-hero-mobile-photo-h: 502.86;
  --muah-hero-mobile-photo-aspect: 370 / 502.86;
  --muah-hero-mobile-photo-offset: 145px;
  --muah-hero-mobile-photo-top-fade-h: 200px;
  --muah-hero-mobile-photo-bottom-fade-h: 48px;
  --muah-hero-mobile-bottom-pad: 0px;
  --muah-hero-mobile-eyebrow-title-gap: 20px;
  --muah-hero-mobile-title-cta-gap: 20px;
  /* 모바일 히어로 상단 — 헤더~eyebrow 검정 여백 + 페이드 */
  --muah-hero-mobile-top-black: 60px;
  --muah-hero-mobile-top-fade-h: 80px;
  --muah-hero-mobile-copy-lift: 20px;
  /* 사진 상단 — 카피 아래 페이드 (::before = black-h + fade-ext) */
  --muah-hero-photo-fade-h: 615px;
  --muah-hero-photo-fade-ext: 36px;
  /* 데스크톱 — 제품(부스)이 첫 화면에 살짝 보이도록 포커스를 아래로 */
  --muah-hero-photo-object-y: 40%;
  --muah-hero-photo-pull-up: 72px;
  --muah-hero-photo-fade: linear-gradient(
    180deg,
    #000000 0%,
    #000000 16%,
    rgba(0, 0, 0, 0.88) 30%,
    rgba(0, 0, 0, 0.58) 46%,
    rgba(0, 0, 0, 0.24) 62%,
    rgba(0, 0, 0, 0) 76%
  );
  --muah-hero-bottom-fade-h: 280px;

  /* 02 페인포인트 배경 (Figma 322:2627 — black base + 하단 blue glow + 라벤더 radial) */
  --muah-pain-top: #1a2330;
  --muah-pain-base: #0a1422;
  --muah-pain-blue-rgb: 71, 153, 242;   /* #4799F2 하단 글로우 */
  --muah-pain-glow-rgb: 242, 212, 253;  /* #F2D4FD 라벤더 하이라이트 */
  /* 히어로 하단 → 페인포인트(검정 상단) 브리지 — 짧은 페이드 */
  --muah-hero-overlay-bottom: linear-gradient(
    to top,
    #000000 0%,
    #000000 12%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.28) 62%,
    rgba(0, 0, 0, 0) 100%
  );
  --muah-hero-gradient: linear-gradient(180deg, rgba(0, 1, 5, 1) 0%, rgba(0, 1, 5, 0) 100%);

  /* Header — solid black/white (Figma 322:2451, glass 제거) */
  --muah-header-dark-bg: #000000;
  --muah-header-light-bg: #ffffff;

  /* Sticky / floating CTA pill (Figma 322:2659 — Rectangle 557) */
  --muah-sticky-bg: rgba(255, 255, 255, 0.5);
  --muah-sticky-blur: blur(20px) saturate(130%);
  --muah-sticky-shadow: 0 4px 15.4px rgba(0, 0, 0, 0.08);

  /* Layout */
  --muah-inner-max: 1280px;
  --muah-inner-width: 90%;
  --muah-footer-meta: 14px;
  --muah-footer-meta-lh: 30px;
  --muah-header-h: 65px;
  --muah-header-pad-x: 20px;
  --muah-logo-h: 18px;
  /* Mobile header — 로고 좌우 20px */
  --muah-header-pad-x-mobile: 20px;
  --muah-logo-h-mobile: 16px;
  /* Section type — Figma 통일 34px / 18px */
  --muah-title-md: 34px;
  --muah-body-md: 18px;
  /* 04 org-tablet — PNG 내부 여백 보정 (가운데 정렬 + 확대) */
  --muah-org-img-width: 148%;
  --muah-org-img-margin-block: -6%;
  --muah-org-img-offset-top: 300px;
  --muah-radius-sm: 20px;
  --muah-radius-pill: 30px;
  --muah-radius-sticky: 36.5px;

  /* Typography */
  --muah-font: 'Pretendard', sans-serif;
  --muah-font-display: 'Perpetua Titling MT', serif;
  --muah-font-nav: 'Stack Sans Headline', var(--muah-font);

  /* Legacy alias bridge (optional during migration) */
  --mainColor: var(--muah-brand);
  --mainColor2: var(--muah-brand);
}

/* Mobile type scale — Figma MO_메인페이지 1:11 (370px) */
@media (max-width: 860px) {
  body.renewal,
  .renewal-scope {
    --muah-m-hero-eyebrow: 16px;
    --muah-m-hero-title: 24px;
    --muah-m-hero-cta: 16px;
    --muah-m-hero-cta-pad-y: 20px;
    --muah-m-hero-cta-pad-x: 30px;
    --muah-m-hero-cta-radius: 40px;
    --muah-m-hero-eyebrow-lh: 24px;
    --muah-m-hero-title-lh: 34px;
    --muah-m-section-title: 34px;
    --muah-m-section-title-lh: 48px;
    --muah-m-section-body: 18px;
    --muah-m-badge: 16px;
    --muah-m-badge-lh: 20px;
    --muah-m-badge-pad-y: 9px;
    --muah-m-badge-pad-x: 18px;
    --muah-m-badge-min-h: 38px;
    --muah-m-badge-radius: 34px;
    --muah-m-pain-section-title: 28px;
    --muah-m-pain-section-title-lh: 40px;
    --muah-m-pain-head-gap: 50px;
    --muah-m-pain-pad-top: 48px;
    --muah-m-pain-pad-bottom: 64px;
    --muah-m-pain-top-gradient-h: 0px;
    --muah-m-pain-card-title: 20px;
    --muah-m-pain-card-title-lh: 28px;
    --muah-m-pain-card-title-body-gap: 32px;
    --muah-m-pain-card-pad-top: 28px;
    --muah-m-pain-card-pad-x: 28px;
    --muah-m-pain-card-pad-bottom: 20px;
    --muah-m-pain-body: 15px;
  --muah-m-pain-body-lh: 24px;
    --muah-m-feature-pad-top: 73px;
    --muah-m-feature-section-title: 28px;
    --muah-m-feature-section-title-lh: 40px;
    --muah-m-feature-section-title-weight: 600;
    --muah-m-feature-title: 23px;
    --muah-m-feature-title-lh: 24px;
    --muah-m-feature-body: 15px;
    --muah-m-feature-body-lh: 25px;
    --muah-m-feature-step: 16px;
    --muah-m-feature-head-image-gap: calc(100vw * 35.48 / 370);
    --muah-m-feature-badge-gap: calc(100vw * 33 / 440);
    --muah-m-feature-row-gap: calc(100vw * 40 / 440);
    --muah-m-feature-block-gap: calc(100vw * 64 / 440);
    --muah-org-img-width: 108vw;
    --muah-org-img-margin-block: -8vw;
    --muah-m-org-body: 15px;
    --muah-m-org-body-lh: 25px;
    --muah-m-emotion-pad-top: calc(100vw * 88 / 440);
    --muah-m-emotion-badge-gap: calc(100vw * 33 / 440);
    --muah-m-emotion-title-gap: calc(100vw * 30 / 440);
    --muah-m-emotion-media-gap: calc(100vw * 50 / 440);
    --muah-m-emotion-section-title: 28px;
    --muah-m-emotion-section-title-lh: 40px;
    --muah-m-emotion-body: 15px;
    --muah-m-emotion-body-lh: 25px;
    --muah-m-emotion-inner-pad-x: calc(100vw * 24 / 440);
    --muah-m-emotion-img-radius: 15px 0 0 0;
    --muah-m-emotion-media-pad-left: calc(100vw * 24 / 440);
    --muah-m-welfare-pad-top: calc(100vw * 88 / 440);
    --muah-m-welfare-inner-pad-x: calc(100vw * 32 / 440);
    --muah-m-welfare-badge-gap: calc(100vw * 33 / 440);
    --muah-m-welfare-title-gap: calc(100vw * 30 / 440);
    --muah-m-welfare-media-gap: calc(100vw * 50 / 440);
    --muah-m-welfare-section-title: 28px;
    --muah-m-welfare-section-title-lh: 40px;
    --muah-m-welfare-img-radius: 0 15px 0 0;
    --muah-m-welfare-media-pad-right: calc(100vw * 24 / 440);
    --muah-m-install-section-title: 28px;
    --muah-m-install-section-title-lh: 40px;
    --muah-m-install-badge: 13px;
    --muah-m-install-badge-lh: 20px;
    --muah-m-install-badge-pad-y: 8px;
    --muah-m-install-badge-pad-x: 14px;
    --muah-m-install-badge-radius: 34px;
    --muah-m-install-card-radius: 15px;
    --muah-m-install-title: 20px;
    --muah-m-install-body: 14px;
    --muah-m-news-title: 17px;
    --muah-m-news-body: 16px;
    --muah-m-news-tag: 15px;
    --muah-m-form: 16px;
    --muah-m-agree: 14px;
    --muah-m-footer: 20px;
    --muah-m-footer-meta: 12px;
    --muah-m-sticky-cta: 18px;
    /* Figma 1:12 — 370 기준 스케일 */
    --muah-hero-mobile-photo-offset: calc(100vw * 145 / 370);
    --muah-hero-mobile-photo-top-fade-h: calc(100vw * 200 / 370);
    --muah-hero-mobile-photo-bottom-fade-h: calc(100vw * 48 / 370);
    --muah-hero-mobile-bottom-pad: 0px;
    --muah-hero-mobile-eyebrow-title-gap: calc(100vw * 20 / 370);
    --muah-hero-mobile-title-cta-gap: calc(100vw * 20 / 370);
    --muah-hero-mobile-top-black: calc(100vw * 90 / 370);
    --muah-hero-mobile-top-fade-h: calc(100vw * 80 / 370);
  }
}