/* ============================================================
   tokens.css — (주)이즈피엠피 (ezpmp) 디자인 토큰
   Figma 시안 (PQGZTOEyaD7YtxRU1Cu5vi) 기반 추출 — 2026-05-23
   ============================================================ */

:root {
  /* ── Brand colors ─────────────────────────────────────── */
  --color-primary:        #FF6B00;   /* 오렌지 — 로고/활성/CTA */
  --color-primary-hover:  #E55C00;
  --color-primary-soft:   #FFF1E5;
  --color-primary-line:   #FFD3B0;

  /* ── Surface / background ─────────────────────────────── */
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #F7F7F8;
  --color-bg-mid:         #EAEAEC;
  --color-bg-dark:        #1A1A1A;   /* Hero/Business/Contact/Footer */
  --color-bg-dark-soft:   #2A2A2A;
  --color-bg-dark-line:   #3A3A3A;

  /* Hero 그라데이션 — 다크 + 오렌지 */
  --color-hero-grad: radial-gradient(120% 80% at 20% 30%, #5A2200 0%, #2A1100 45%, #100600 80%);

    /* 각 사업부 별 색상*/
    --global-mice-primary : #AF583C;
    --mice-tech-primary : #24799D;
    --smart-tour-primary : #09818B;
    --ip-biz-primary : #8C4C9E;
    --i-nori-primary : #B95856;

    /* ── Text ─────────────────────────────────────────────── */
  --color-text:           #1A1A1A;
  --color-text-soft:      #4A4A4A;
  --color-text-mute:      #8A8A8A;
  --color-text-line:      #CDCDD2;
  --color-text-on-dark:   #FFFFFF;
  --color-text-on-dark-soft: rgba(255,255,255,0.72);
  --color-text-on-dark-mute: rgba(255,255,255,0.42);

  /* ── Border ───────────────────────────────────────────── */
  --color-border:         #E5E5E8;
  --color-border-strong:  #C8C8CE;
  --color-divider:        #ECECEF;

  /* ── State ────────────────────────────────────────────── */
  --color-link:           var(--color-primary);
  --color-success:        #2EB872;
  --color-warning:        #FFB300;
  --color-error:          #E54848;

  /* ── Typography ───────────────────────────────────────── */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
                 sans-serif;
  --font-family-en: 'Pretendard', 'Inter', system-ui, sans-serif;
  /* GNB / Mega-title 은 Figma 시안에서 Urbanist — 영문 메뉴 라벨용 */
  --font-family-nav: 'Urbanist', 'Pretendard', 'Inter', system-ui, sans-serif;

  /* Type scale */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;

  --fs-hero:       clamp(36px, 5vw, 64px);
  --fs-section:    clamp(28px, 3.5vw, 44px);
  --fs-page-title: clamp(28px, 3.2vw, 40px);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --lh-tight:   1.18;
  --lh-snug:    1.32;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --letter-tight:   -0.02em;
  --letter-normal:  0;
  --letter-wide:    0.04em;

  /* ── Spacing scale (8pt grid) ─────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  --section-py: clamp(56px, 8vw, 120px);

  /* ── Layout ──────────────────────────────────────────── */
  --container-max: 1280px;
  --container-px: clamp(20px, 4vw, 48px);
  --topbar-h:        72px;
  --topbar-h-mobile: 60px;
  --site-max-w:      1920px;                /* .site-wrap max-width — topbar/mega-panel 공통 */

  /* ── GNB / Megamenu (Figma 시안 1920px 정밀 매칭) ─────── */
  /* Figma: gnb=1920×100, padding-x 120 / megamenu=1920×892, container 1680, columns 6×280 */
  --gnb-h:           100px;                  /* desktop ≥1200px */
  --gnb-h-mobile:    60px;                   /* ≤1200px */
  --gnb-px:          clamp(24px, 4vw, 80px);     /* 1920기준 80(이전 120) — 메뉴 1줄 확보 */
  --gnb-item-gap:    0;                          /* space-between 으로 분배 (이전 clamp) */
  --gnb-section-gap: clamp(24px, 5vw, 100px);    /* 세 섹션 사이 간격 */
  --gnb-link-fs:     16px;
  --gnb-link-color:  #222222;
  --gnb-shadow:      0 0 50px rgba(0,0,0,0.05);
  /* 사용자 지침 2026-05-24: ez_unified.css 방식 — GNB 폭을 mega-grid 와 동기화
   *   --gnb-list-w     = mega-grid 폭 (1680) → 6 아이템 × 280 slot 으로 균등 분배
   *   --gnb-link-min-w = 각 슬롯 안 콘텐츠 최소 폭
   */
  --gnb-link-min-w:  0;                                  /* flex:1 으로 슬롯 균등 분배 */
  --gnb-link-px:     16px;                               /* 좌우 패딩 */

  /* new_home_page4 ez_unified 동등 매핑 — height 0→588 transition */
  --mega-h:          588px;                   /* ez_unified 와 동일 — open 시 풀 패널 */
  --mega-col-min-h:  480px;                   /* 컬럼 최소 높이 (ez_megamenu_col) */
  --mega-px:         clamp(24px, 6.25vw, 120px);  /* ez --ez-pad-x = 120 */
  --mega-inner-pt:   56px;                    /* ez_megamenu_inner padding-top */
  --mega-inner-pb:   80px;                    /* ez_megamenu_inner padding-bottom */
  --mega-col-pl:     28px;                    /* ez_megamenu_col padding-left */
  --mega-col-pr:     24px;                    /* ez_megamenu_col padding-right */
  --mega-col-border: rgba(0,0,0,0.06);        /* ez_megamenu_col border-left */
  --mega-title-fs:   22px;                    /* ez_mm_title font-size */
  --mega-title-mb:   32px;                    /* ez_mm_title margin-bottom */
  --mega-link-gap:   18px;                    /* ez_mm_list gap */
  --mega-link-fs:    15px;                    /* ez_mm_list a font-size */
  --mega-link-color: #444;                    /* ez_mm_list a color */
  --mega-bg:         #FFFFFF;                 /* opaque white */
  --mega-blur:       0px;
  --mega-header-bg:  rgba(255,255,255,0.98);  /* .is-menu-open 헤더 배경 */
  --mega-header-blur: 16px;
  --mega-backdrop:   rgba(0,0,0,0.35);        /* ez_menu_backdrop */

  --family-w:        220px;
  --family-h:        48px;
  --family-radius:   7px;
  --family-border:   #BFBFBF;
  --family-fs:       15px;

  /* ── Hero (Figma 42:8 — 1920×980) ─────────────────────── */
  --hero-h:           980px;                  /* desktop fixed */
  --hero-h-tablet:    clamp(560px, 78vh, 780px);
  --hero-px:          var(--gnb-px);          /* 124≈120 — 정렬 */
  --hero-title-fs:    clamp(36px, 5vw, 64px); /* Figma 64 */
  --hero-title-lh:    1.2;                    /* 76.8/64 */
  --hero-title-fw:    700;                    /* Urbanist Bold */
  --hero-sub-fs:      18px;                   /* Figma 18 */
  --hero-sub-lh:      1.0;                    /* 18/18 */
  --hero-sub-ls:      -0.02em;                /* -0.36/18 */
  --hero-text-color:  #FFFFFF;
  --hero-title-y:     560px;                  /* abs y in 980 */
  --hero-sub-y:       778px;                  /* gap 218 from title-y */
  --hero-deco-y:      889px;                  /* gap 111 from sub-y */
  --hero-deco-w:      231px;                  /* 흐린 라인 */
  --hero-deco-accent: 53px;                   /* 굵은 흰 강조선 */

  /* ── Business (Figma 42:61 — 1920×736) ────────────────── */
  --biz-section-h:    736px;                  /* desktop fixed (참조용) */
  --biz-section-px:   var(--gnb-px);          /* 120 */
  --biz-section-pt:   clamp(60px, 6vw, 100px);
  --biz-section-pb:   clamp(60px, 6vw, 100px);
  --biz-section-gap:  72px;                   /* 타이틀 ↔ 카드 그리드 */
  --biz-title-fs:     clamp(36px, 3vw, 52px); /* Figma 52 */
  --biz-title-lh:     1.0;
  --biz-title-fw:     600;                    /* Urbanist SemiBold */
  --biz-card-w:       250px;                  /* desktop */
  --biz-card-h:       412px;                  /* desktop */
  --biz-card-p:       56px;                   /* 4면 균일 */
  --biz-card-radius:  50px;                   /* 둥근 카드 */
  --biz-card-bg:      #262626;                /* 카드 배경 */
  --biz-card-gap:     35px;                   /* 카드 사이 */
  --biz-card-inner-gap: 40px;                 /* 아이콘 ↔ 타이틀 ↔ 설명 */
  --biz-card-title-fs: 24px;                  /* Urbanist 24 */
  --biz-card-title-fw: 600;
  --biz-card-icon:    48px;
  --biz-card-text-w:  156px;                  /* 카드 내부 컨텐츠 폭 (308-56*2) */

  /* ── Our Works (Figma 42:178 — 1920×5826 = 5 blocks × ~1062) ── */
  --works-section-px:   var(--gnb-px);        /* 120 */
  --works-section-pt:   clamp(60px, 6vw, 100px);
  --works-section-pb:   clamp(60px, 6vw, 100px);
  --works-section-gap:  72px;                 /* 타이틀 ↔ 첫 블록 */
  --works-block-h:      1062px;               /* 블록 한 개 (마지막은 998) */
  --works-block-gap:    64px;                 /* 블록 사이 (블록 내 콘텐츠↔구분선) */
  --works-row-gap:      64px;                 /* 큰카드 ↔ 작은카드 가로 (이전 46 → 34, 균일) */
  --works-stack-gap:    34px;                 /* 작은카드1 ↔ 작은카드2 세로 (사용자 지침 — 균일) */
  --works-big-w:        802px; /*641px;*/                /* 큰 카드 너비 */
  --works-big-h:        998px; /*798px;*/                /* 큰 카드 높이 */
  --works-big-radius:   50px;
  --works-small-w:      510px; /*408px;*/                /* 작은 카드 너비 */
  --works-small-h:      482px; /*385px;*/                /* 작은 카드 높이 */
  --works-small-radius: 30px;
  --works-card-bg:      #252525;              /* 카드 배경 (0.146*255 = 약 #252525) */
  --works-divider:      #333333;              /* 블록 사이 1px 라인 */
  --works-overlay-grad: linear-gradient(180deg, rgba(225,101,61,0) 0%, rgba(225,101,61,0.20) 100%);
  /* 사업부 라벨 (큰카드 좌하단 overlay) */
  --works-label-fs:     32px;                 /* 사업부명 Pretendard SemiBold 32/32 */
  --works-label-arrow:  48px;
  /* 프로젝트 텍스트 (작은카드 아래) */
  --works-title-fs:     20px;
  --works-title-lh:     1.0;
  --works-title-ls:     -0.02em;              /* -0.4/20 */
  --works-desc-fs:      14px;
  --works-desc-lh:      1.55;                 /* 21.7/14 */
  --works-desc-ls:      -0.02em;              /* -0.28/14 */
  --works-desc-color:   #CBCBCB;

  /* ── Partners (Figma 42:355 — 1920×734, bg #252525) ───── */
  --partners-bg:        #252525;
  --partners-py:        100px;
  --partners-px:        var(--gnb-px);          /* 120 */
  --partners-gap:       100px;                  /* 헤더 ↔ 로고 그리드 */
  --partners-title-fs:  clamp(36px, 3vw, 52px);
  --partners-title-lh:  1.25;                   /* 65.8/52.6 */
  --partners-title-color: #F1592A;              /* 오렌지 강조 */

  /* ── Why ezpmp (Figma 42:583 — 1920×690, 풀-블리드 BG) ── */
  --why-h:              690px;
  --why-px:             var(--gnb-px);
  --why-title-fs:       clamp(56px, 8vw, 114px);   /* Urbanist 114 */
  --why-title-lh:       1.0;
  --why-eyebrow-fs:     clamp(40px, 5.5vw, 90px);  /* "Why" 89.5 */
  --why-eyebrow-fw:     400;                       /* Urbanist Regular */
  --why-title-fw:       600;                       /* Urbanist SemiBold */
  --why-item-fs:        clamp(18px, 2vw, 30px);    /* 30 */
  --why-item-fw:        500;
  --why-item-gap:       62px;                      /* itemSpacing */
  --why-item-icon-gap:  16px;
  --why-overlay:        linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.65) 100%);

  /* ── Contact (Figma 42:604 — 1920×648) ────────────────── */
  --contact-px:         var(--gnb-px);
  --contact-py:         100px;
  --contact-gap:        clamp(60px, 18vw, 439px); /* 좌우 컬럼 사이 */
  --contact-title-fs:   clamp(36px, 3vw, 52px);
  --contact-title-fw:   600;                    /* Urbanist SemiBold */
  --contact-desc-fs:    14px;
  --contact-desc-lh:    1.55;
  --contact-form-gap:   24px;                   /* 폼 필드 사이 */
  --contact-form-block-gap: 32px;
  --contact-btn-h:      48px;
  --contact-btn-radius: 10px;
  --contact-btn-fs:     16px;

  /* ── Footer (Figma 42:635 — 1920×476) ─────────────────── */
  --footer-bg:          #1A1A1A;
  --footer-py:          56px;                   /* paddingTop/Bottom */
  --footer-px:          var(--gnb-px);          /* 120 */
  --footer-gap:         32px;                   /* 행 사이 */
  --footer-sns-gap:     40px;
  --footer-cols-gap:    32px;
  --footer-col-link-gap: 20px;                  /* itemSpacing 메뉴 내 */
  --footer-contact-fs:  14px;
  --footer-contact-gap: 8px;                    /* 라벨↔값 */
  --footer-divider:     rgba(255,255,255,0.10);
  --footer-copy-fs:     12px;
  --footer-copy-color:  rgba(255,255,255,0.42);
  --footer-link-fs:     14px;
  --footer-link-color:  rgba(255,255,255,0.72);
  --footer-col-title-fs: 16px;
  --footer-col-title-fw: 600;

  /* ── Page Hero (business/exhibit 페이지 헤더 — Figma Frame 1000005165) ── */
  --pg-hero-px:      var(--gnb-px);          /* 120 */
  --pg-hero-pt:      80px;
  --pg-hero-pb:      48px;
  --pg-title-fs:     clamp(36px, 3vw, 52px); /* Urbanist 52 Bold */
  --pg-title-fw:     700;
  --pg-crumb-fs:     13px;
  --pg-crumb-color:  rgba(34,34,34,0.65);

  /* ── Sub-tabs (5개 서브 메뉴 — Figma Group 73539) ──── */
  --pg-tab-fs:       18px;                   /* Urbanist 18 */
  --pg-tab-fw-on:    600;                    /* active */
  --pg-tab-fw-off:   500;                    /* inactive */
  --pg-tab-gap:      40px;                   /* itemSpacing */
  --pg-tab-h:        56px;                   /* 클릭 영역 */

  /* ── Menu Strip (Figma 66:1200 — 1920×88) — 컴팩트 hover 메뉴 ── */
  --strip-h:         88px;
  --strip-bg:        #FAFAFA;
  --strip-shadow:    0 4px 40px rgba(0,0,0,0.10);
  --strip-gap:       56px;                    /* itemSpacing */
  --strip-fs:        16px;
  --strip-color:     #666666;
  --strip-color-on:  #E9550A;                 /* 활성 오렌지 */
  --strip-marker:    #EF7902;                 /* Polygon 1 오렌지 */

  /* ── Lang Dropdown — KR/EN/JP/CN 드롭다운 ── */
  --lang-w:          140px;                    /* 한국어 등 라벨 줄바꿈 방지 (이전 120) */
  --lang-radius:     8px;
  --lang-item-h:     40px;
  --lang-bg:         #FFFFFF;
  --lang-border:     #E5E5E8;
  --lang-shadow:     0 8px 24px rgba(0,0,0,0.12);

  /* ── Radius ──────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-dark: 0 12px 40px rgba(0,0,0,0.45);

  /* ── Motion ──────────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 0.14s;
  --dur-base: 0.22s;
  --dur-slow: 0.36s;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-topbar:   100;
  --z-mega:     110;
  --z-sidemenu: 120;
  --z-backdrop: 90;
  --z-modal:    200;
}

/* Breakpoints (참고)
   sm: 640 / md: 768 / lg: 1024 / xl: 1200 (사이드메뉴 분기) / 2xl: 1440 */