/* ============================================================
   main.css — 메인 페이지 전용
   섹션: HERO / BUSINESS / OUR WORKS / PARTNERSHIPS / WHY EZPMP / CONTACT
   ============================================================ */

/* ===== HERO — Figma 42:8 (1920×980) 정밀 매칭 ============= */

.hero {
  position: relative;
  height: 100vh;
    width: 100%;
  /* Hero 배너 이미지 — 사용자 지침 (2026-05-24):
   *   docs/figma_image/main_image.png → homepage/images/main_image.{webp,png}
   * 우선순위:
   *   1) main_image.webp (~81 KB, 94% 절감)
   *   2) main_image.png  (1.5 MB, WebP 미지원 fallback)
   *   3) hero_bg_only__42_12@2x.webp (이전 Figma 다운로드본)
   */
  /*background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.65) 100%);*/
    background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.65) 100%), url('/resources/images/ezpmp/mainVisualPC.png')  no-repeat 50% 50% / cover;
  background-color: #2A1100;

  color: var(--hero-text-color);
  overflow: hidden;
  margin-top: calc(var(--gnb-h) * -1);            /* GNB 위에 풀-블리드 */
  /*padding-top: var(--gnb-h);                      !* GNB 영역만큼 콘텐츠 밀어내기 *!*/
}
.hero::before {
  /* 추가 그라데이션 오버레이 — Figma 시안의 가독성 확보 */
  /*content: '';*/
  /*position: absolute; inset: 0;*/
  /*background: linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.50) 100%);*/
  /*pointer-events: none;*/
  /*  z-index:9999;*/
}
.hero > .container {
  position: absolute; z-index: 10; top:100px; left:0;
  max-width: none;
  padding-left: var(--hero-px);
  padding-right: var(--hero-px);
  height: 100%;
  display: flex; flex-direction: column;
  /*justify-content: flex-end;*/
    justify-content: center;
    align-items:center;
    text-align:center;
}
/* Eyebrow — Figma 시안에 없음 (작게 보조 표기) */
.hero-eyebrow {
  margin-top: calc(var(--hero-title-y) - var(--gnb-h) - 28px);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wide);
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
/* 슬라이더 전체 영역 */
.hero-slider {
    width: 100%;
    height: 100%;
    line-height:0;
}
.hero-slider video {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit:cover;
}

 /* Slick 내부 필수 지정: 개별 슬라이드 아이템의 높이를 부모에 맞춤 */
.hero-slider .slide-item {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.hero .slick-dotted.slick-slider {
    margin-bottom:0px;
}
.hero .container::before {
    /* 추가 그라데이션 오버레이 — Figma 시안의 가독성 확보 */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.50) 100%);
    pointer-events: none;
    z-index:9999;
}
/* 2. 바(Bar) 이동형 인디케이터 (.hero-deco 내장형) */
.hero-deco {
    position: relative;
    z-index: 10;
    height:100px;
    padding:20px 0;
    margin-bottom:30px;
}


/* 도트 전체를 감싸는 ul을 하나의 연결된 '연한 배경 트랙(선)'으로 활용 */
.hero-deco .slick-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    position: relative;
    background-color: rgba(255, 255, 255, 0.25); /* 움직이는 영역의 전체 레일 선 */
    border-radius: 2px;
    width:auto;
}

/* 개별 슬라이드가 차지하는 고정 영역 간격 설정 */
.hero-deco .slick-dots li {
    position: relative;
    width: 50px;  /* 각 도트당 할당된 가로 너비 (슬라이드 개수만큼 곱해져 전체 레일 길이가 됨) */
    height: 4px;  /* 바의 두께 */
    cursor: pointer;
    margin:0;
}

/* Slick 기본 버튼 초기화 및 숨김 처리 */
.hero-deco .slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-indent: -9999px;
    cursor: pointer;
}

/*
  [핵심 슬라이딩 가속 효과]
  활성화된 버튼에 백그라운드를 채우고,
  Slick 내부 구조상 미세하게 발생하는 인덱스 전환 시 부드러운 위치/가속도 컴포넌트 처리
*/
.hero-deco .slick-dots li button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slick-dots li button:before {
    display:none!important;
}

/* 활성화된 위치의 바(Bar)만 선명한 흰색으로 불이 들어오며 교체되는 애니메이션 효과 */
.hero-deco .slick-dots li.slick-active button::after {
    background-color: #ffffff;
    border-radius: 2px;
    /* fade 옵션과 결합 시 인덱스 레일을 따라 시각적으로 빛이 흐르듯 이동하는 효과를 냅니다 */
    animation: barSlideEffect 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes barSlideEffect {
    0% { opacity: 0.5; transform: scaleX(0.8); }
    100% { opacity: 1; transform: scaleX(1); }
}
/* Title — Urbanist Bold 64/76.8 / 좌측 정렬 / 2-line */
.hero-title {
  font-family: var(--font-family-nav);            /* Urbanist */
  font-size: var(--hero-title-fs);                /* clamp -> 64 */
  line-height: var(--hero-title-lh);              /* 1.2 */
  letter-spacing: 0;
  font-weight: var(--hero-title-fw);              /* 700 */
  color: var(--hero-text-color);
  margin: 0;
  max-width: 18ch;
    min-height:150px;
}
/* Subtitle (=Figma '사람과 산업을 이어 더 나는 미래를 엽니다.') */
.hero-desc {
  margin-top: calc(var(--hero-sub-y) - var(--hero-title-y) - 154px); /* ≈64px */
  font-size: var(--hero-sub-fs);                  /* 18 */
  line-height: var(--hero-sub-lh);                /* 1.0 */
  letter-spacing: var(--hero-sub-ls);             /* -0.02em */
  font-weight: var(--fw-medium);
  color: var(--hero-text-color);
  max-width: 54ch;
    min-height:18px;
}
/* Deco line — Figma 시안 y=889 (231px 흐린선 + 좌 53px 굵은선) */
/*.hero-deco {
  position: relative;
  width: var(--hero-deco-w);                      !* 231 *!
  height: 3px;
  margin-top: calc(var(--hero-deco-y) - var(--hero-sub-y) - 18px); !* 93 *!
  background: linear-gradient(
    to right,
    rgba(255,255,255,1) 0,
    rgba(255,255,255,1) var(--hero-deco-accent),  !* 53px 까지 진한 흰 *!
    rgba(255,255,255,0.5) var(--hero-deco-accent),
    rgba(255,255,255,0.5) 100%
  );
}*/
/* CTA — Figma 시안엔 없으나 UX 보조 (Hero 하단) */
.hero-cta {
  margin-top: auto;
  margin-bottom: var(--space-12);
  display: inline-flex; gap: var(--space-3);
}

/* 반응형 ── Hero ── */
@media (max-width: 1200px) {
  .hero { height: auto; min-height: var(--hero-h-tablet); }
  .hero > .container { padding-left: var(--container-px); padding-right: var(--container-px); }
  .hero-eyebrow { margin-top: var(--space-16); }
  .hero-title { max-width: 22ch; min-height:auto; }
}
@media (max-width: 768px) {
  .hero { min-height: clamp(480px, 80vh, 640px); }
  .hero-eyebrow { margin-top: var(--space-12); }
  .hero-deco { width: 160px; }
    .hero-slider video {
        object-fit:cover;
        min-height:clamp(480px, 80vh, 640px);
    }
}

/* ===== BUSINESS — Figma 42:61 (1920×736) 정밀 매칭 ======== */
.business {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--biz-section-pt) 0 var(--biz-section-pb);
}
.business > .container {
  max-width: none;
  padding-left:  var(--biz-section-px);
  padding-right: var(--biz-section-px);
}
/* 타이틀 — Urbanist 52 SemiBold, 좌측정렬, 흰색 */
.business .sec-head {
  margin-bottom: var(--biz-section-gap);       /* 72 — Figma itemSpacing */
}
.business .sec-head .eyebrow { display: none; } /* Figma 는 eyebrow 없음 */
.business .sec-head .title {
  font-family: var(--font-family-nav);         /* Urbanist */
  font-size:   var(--biz-title-fs);            /* 52 */
  line-height: var(--biz-title-lh);            /* 1.0 */
  font-weight: var(--biz-title-fw);            /* 600 */
  color:       #FFFFFF;
  letter-spacing: 0;
  margin: 0;
}
/* 5개 카드 그리드 — 308×412 / gap 35 / new_home_page4 ez_biz 스타일 */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(6, var(--biz-card-w));
  justify-content: center;
  column-gap: var(--biz-card-gap);
  row-gap:    var(--biz-card-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.biz-card {
  list-style: none;
  width:         var(--biz-card-w);            /* 308 */
  min-height:    var(--biz-card-h);            /* 412 */
}
.biz-card > a {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  gap: var(--biz-card-inner-gap);              /* 40 */
  width: 100%;
  min-height: var(--biz-card-h);
  background:    var(--biz-card-bg);           /* #262626 */
  border:        0;
  border-radius: var(--biz-card-radius);       /* 50px */
  padding:       var(--biz-card-p);            /* 56 (4면) */
  color: #FFFFFF;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.biz-card > a:hover {
  transform: translateY(-6px);
  background: #2F2F2F;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
/* 아이콘 — 48×48 (오렌지 톤) */
.biz-card .ic {
  width: var(--biz-card-icon);
  height: var(--biz-card-icon);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--color-primary);
}
.biz-card .ic img,
.biz-card .ic svg,
.biz-card .ic picture { width: 100%; height: 100%; object-fit: contain; display: block; }
.biz-card .ic picture img { width: 100%; height: 100%; }
/* 타이틀 — Urbanist SemiBold 24 */
.biz-card h3 {
  font-family: var(--font-family-nav);
  font-size:   var(--biz-card-title-fs);       /* 24 */
  line-height: 1.0;
  font-weight: var(--biz-card-title-fw);       /* 600 */
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  width: var(--biz-card-text-w);               /* 196 */
    min-height:50px;
}
/* 서브 항목 리스트 (new_home_page4 ez_biz_sublist) */
.biz-card .biz-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  width: var(--biz-card-text-w);
}
.biz-card .biz-sublist li {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.72);
  position: relative;
  padding-left: 12px;
}
.biz-card .biz-sublist li::before {
  content: '·';
  position: absolute;
  left: 0; top: 0;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
/* 옛 p 설명 (있다면) — 숨김 (sublist 로 교체) */
.biz-card > a > p { display: none; }



/* ==========================================
   마우스 올렸을 때 (HOVER EFFECT)
   * 상위 엘리먼트나 SVG 어디에 호버해도 작동하도록 트리거 강화
========================================== */

/* 1. 내부 중심 원 */
.biz-card > a:hover .animated-icon .center-core,
.animated-icon:hover .center-core {
    /*animation: hoverCore 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;*/
    animation: hoverCorePulseEase 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 2. 외부 큰 궤도 원 */
.biz-card > a:hover .animated-icon .outer-orbit,
.animated-icon:hover .outer-orbit {
    animation: hoverOrbit 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.05s;
}

/* 3. 상단 및 하단 위성 원 */
.biz-card > a:hover .animated-icon .satellite-top,
.animated-icon:hover .satellite-top {
    animation: hoverSatellite 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
}

.biz-card > a:hover .animated-icon .satellite-bottom,
.animated-icon:hover .satellite-bottom {
    animation: hoverSatellite 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.25s;
}




/* ==========================================
   애니메이션 키프레임 (Keyframes)
========================================== */
@keyframes hoverCore {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.1) rotate(-15deg); }
    100% { transform: scale(1) rotate(0deg); }
}
/* 새로운 애니메이션 키프레임 추가 */
@keyframes hoverCorePulseEase {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-8deg); }  /* 빠르게 커지며 살짝 왼쪽 */
    50% { transform: scale(1.05) rotate(5deg); }   /* 약간 줄어들며 살짝 오른쪽 (반동) */
    75% { transform: scale(1.1) rotate(-2deg); }   /* 다시 미세하게 커짐 (여운) */
    100% { transform: scale(1) rotate(0deg); }      /* 제자리 */
}
@keyframes hoverOrbit {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes hoverSatellite {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* [공통 설정] 48px * 48px 의 정확한 정중앙(24px, 24px)을 애니메이션 기준점으로 설정 */
.tech-anim-group {
    transform-origin: 24px 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1; /* 기본 상태 정상 노출 */
}
/* ==========================================
   분리된 아이콘 호버 효과 (삼각형 / 점선)
========================================== */

/* 1. 왼쪽 삼각형 트리거 */
.biz-card > a:hover .animated-icon.split-icon .tri-left,
.animated-icon.split-icon:hover .tri-left {
    animation: bounceTriLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 2. 중앙 점선 트리거 (약간 늦게 시작) */
.biz-card > a:hover .animated-icon.split-icon .dashed-line,
.animated-icon.split-icon:hover .dashed-line {
    animation: bounceDashed 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.05s;
}

/* 3. 오른쪽 삼각형 트리거 */
.biz-card > a:hover .animated-icon.split-icon .tri-right,
.animated-icon.split-icon:hover .tri-right {
    animation: bounceTriRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ==========================================
   애니메이션 키프레임 & 기준점
========================================== */

/* 각 요소의 애니메이션 기준점(transform-origin)을 요소 중심 좌표에 맞춤 */
.animated-icon.split-icon .tri-left {
    transform-origin: 6px 17.5px;
}
.animated-icon.split-icon .dashed-line {
    transform-origin: 15.5px 17.5px;
}
.animated-icon.split-icon .tri-right {
    transform-origin: 25px 17.5px;
}

/* 왼쪽 삼각형: 왼쪽으로 멀어졌다가 살짝 튕기며 복귀 */
@keyframes bounceTriLeft {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    30% { transform: translateX(-4px) scale(1.15) rotate(-6deg); }
    55% { transform: translateX(1px) scale(0.95) rotate(2deg); }
    75% { transform: translateX(-1px) scale(1.05) rotate(-1deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* 오른쪽 삼각형: 오른쪽으로 멀어졌다가 살짝 튕기며 복귀 */
@keyframes bounceTriRight {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    30% { transform: translateX(4px) scale(1.15) rotate(6deg); }
    55% { transform: translateX(-1px) scale(0.95) rotate(-2deg); }
    75% { transform: translateX(1px) scale(1.05) rotate(1deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* 중앙 점선: 위아래로 살짝 당겨지는 느낌 */
@keyframes bounceDashed {
    0% { transform: scaleY(1) translateY(0); }
    30% { transform: scaleY(1.2) scaleX(1.05) translateY(-2px); }
    60% { transform: scaleY(0.9) scaleX(0.95) translateY(1px); }
    80% { transform: scaleY(1.05) scaleX(1.02) translateY(0); }
    100% { transform: scaleY(1) translateY(0); }
}

/* ==========================================
   마우스 올렸을 때 (MICE TECH HOVER EFFECT)
========================================== */

/* 1. 중앙 테크 크로스 핀 (부드러운 정방향 회전 스플래시) */
.biz-card > a:hover .tech-icon .tech-cross,
.tech-icon:hover .tech-cross {
    animation: techCrossSplash 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. 네 귀퉁이 타깃 박스들 (X, Y축 대각선으로 수축 후 튕기는 스플래시) */
.biz-card > a:hover .tech-icon .corner-top-left,
.tech-icon:hover .corner-top-left {
    animation: splashTopLeft 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.biz-card > a:hover .tech-icon .corner-top-right,
.tech-icon:hover .corner-top-right {
    animation: splashTopRight 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.biz-card > a:hover .tech-icon .corner-bottom-left,
.tech-icon:hover .corner-bottom-left {
    animation: splashBottomLeft 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.biz-card > a:hover .tech-icon .corner-bottom-right,
.tech-icon:hover .corner-bottom-right {
    animation: splashBottomRight 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}


/* ==========================================
   MICE Tech 테크니컬 스플래시 키프레임
========================================== */

/* 중앙 크로스 회전 팽창 */
@keyframes techCrossSplash {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(0.85) rotate(-30deg); } /* 살짝 웅크렸다가 */
    65% { transform: scale(1.15) rotate(45deg); }   /* 활기차게 스플래시 회전 */
    100% { transform: scale(1) rotate(0deg); }
}

/* 좌측 상단 사각 가이드 스플래시 */
@keyframes splashTopLeft {
    0% { transform: translate(0, 0); }
    30% { transform: translate(1.5px, 1.5px); }    /* 중앙으로 압축 */
    65% { transform: translate(-2px, -2px); }      /* 바깥으로 팍! 확산 (안 잘리는 마진 설계) */
    100% { transform: translate(0, 0); }
}

/* 우측 상단 사각 가이드 스플래시 */
@keyframes splashTopRight {
    0% { transform: translate(0, 0); }
    30% { transform: translate(-1.5px, 1.5px); }   /* 중앙으로 압축 */
    65% { transform: translate(2px, -2px); }       /* 바깥으로 팍! 확산 */
    100% { transform: translate(0, 0); }
}

/* 좌측 하단 사각 가이드 스플래시 */
@keyframes splashBottomLeft {
    0% { transform: translate(0, 0); }
    30% { transform: translate(1.5px, -1.5px); }   /* 중앙으로 압축 */
    65% { transform: translate(-2px, 2px); }       /* 바깥으로 팍! 확산 */
    100% { transform: translate(0, 0); }
}

/* 우측 하단 사각 가이드 스플래시 */
@keyframes splashBottomRight {
    0% { transform: translate(0, 0); }
    30% { transform: translate(-1.5px, -1.5px); }  /* 중앙으로 압축 */
    65% { transform: translate(2px, 2px); }        /* 바깥으로 팍! 확산 */
    100% { transform: translate(0, 0); }
}
/* ==========================================
   Smart Tour 메뉴 테크니컬 스플래시 트리거
========================================== */

/* 기본 transform 기준점 설정 */
.smart-tour-icon path,
.smart-tour-icon rect {
    transform-origin: center center;
}

/* 1. 가장 중앙 코어 사각형 (부드러운 정방향 회전 스플래시) */
.biz-card > a:hover .smart-tour-icon .tour-core,
.smart-tour-icon:hover .tour-core {
    animation: tourCoreSplash 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. 중앙 연결 네트워크 라인 (미세 동기화 스플래시) */
.biz-card > a:hover .smart-tour-icon .tour-line,
.smart-tour-icon:hover .tour-line {
    animation: tourLineSplash 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. 상하좌우 사각형 (중앙으로 압축 후 바깥으로 팍! 튕기는 스플래시) */
.biz-card > a:hover .smart-tour-icon .box-top,
.smart-tour-icon:hover .box-top {
    animation: splashBoxTop 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.biz-card > a:hover .smart-tour-icon .box-bottom,
.smart-tour-icon:hover .box-bottom {
    animation: splashBoxBottom 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.biz-card > a:hover .smart-tour-icon .box-left,
.smart-tour-icon:hover .box-left {
    animation: splashBoxLeft 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.biz-card > a:hover .smart-tour-icon .box-right,
.smart-tour-icon:hover .box-right {
    animation: splashBoxRight 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}


/* ==========================================
   Smart Tour 테크니컬 스플래시 키프레임
========================================== */

/* 중앙 코어 회전 팽창 */
@keyframes tourCoreSplash {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(0.8) rotate(-45deg); }   /* 웅크리며 역회전 */
    65% { transform: scale(1.5) rotate(45deg); }    /* 중앙에서 팍! 회전 스플래시 */
    100% { transform: scale(1) rotate(0deg); }      /* 자연스럽게 제자리 */
}

/* 연결선 미세 팽창 복귀 */
@keyframes tourLineSplash {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(0.97); opacity: 0.8; }   /* 코어 수축에 맞춰 미세 압축 */
    65% { transform: scale(1.04); opacity: 1; }     /* 확산 시 동반 확장 */
    100% { transform: scale(1); opacity: 1; }
}

/* 상단 사각 가이드 스플래시 (Y축 운동 + 트위스트) */
@keyframes splashBoxTop {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(1.5px) scale(0.95); }              /* 중앙(아래)으로 압축 */
    60% { transform: translateY(-4.5px) scale(1.1) rotate(10deg); } /* 바깥(위)으로 팍! 확산 및 회전 */
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* 하단 사각 가이드 스플래시 (Y축 운동 + 트위스트) */
@keyframes splashBoxBottom {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(-1.5px) scale(0.95); }              /* 중앙(위)으로 압축 */
    60% { transform: translateY(4.5px) scale(1.1) rotate(-10deg); } /* 바깥(아래)으로 팍! 확산 및 회전 */
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* 좌측 사각 가이드 스플래시 (X축 운동 + 트위스트) */
@keyframes splashBoxLeft {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    25% { transform: translateX(1.5px) scale(0.95); }               /* 중앙(우측)으로 압축 */
    60% { transform: translateX(-4.5px) scale(1.1) rotate(-12deg); }/* 바깥(좌측)으로 팍! 확산 및 회전 */
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* 우측 사각 가이드 스플래시 (X축 운동 + 트위스트) */
@keyframes splashBoxRight {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    25% { transform: translateX(-1.5px) scale(0.95); }              /* 중앙(좌측)으로 압축 */
    60% { transform: translateX(4.5px) scale(1.1) rotate(12deg); }  /* 바깥(우측)으로 팍! 확산 및 회전 */
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* [공통] 39px 정방형 기반 변형 부드러움 세팅 */
.ip-anim-group {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 개별 파트별 가변 중심점(transform-origin) 최적화 */
.ip-core       { transform-origin: 19.5px 24px; }  /* 전구 중심점 */
.ip-chip-left  { transform-origin: 4.5px 21px; }   /* 좌측 칩 중심점 */
.ip-chip-right { transform-origin: 34.5px 21px; }  /* 우측 칩 중심점 */
.ip-top-pipe   { transform-origin: 19.5px 3.5px; } /* 상단 파이프 중심점 */

/* ==========================================
   호버 인터랙션 (전구 벌브 업 + 사이드 칩 탄성 바운스)
========================================== */

/* 1. 중앙 전구: 에너지 차오르듯 수직 탄성 스케일 업 */
.biz-card > a:hover .ip-biz-icon .ip-core,
.ip-biz-icon:hover .ip-core {
    animation: bulbLightUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. 좌측 비즈니스 칩: 왼쪽으로 기분 좋게 통통 */
.biz-card > a:hover .ip-biz-icon .ip-chip-left,
.ip-biz-icon:hover .ip-chip-left {
    animation: chipBounceLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

/* 3. 우측 비즈니스 칩: 오른쪽으로 기분 좋게 통통 */
.biz-card > a:hover .ip-biz-icon .ip-chip-right,
.ip-biz-icon:hover .ip-chip-right {
    animation: chipBounceRight 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
    animation-delay: 0.02s;
}

/* 4. 상단 파이프 네트워크: 가볍게 탭핑 바운스 */
.biz-card > a:hover .ip-biz-icon .ip-top-pipe,
.ip-biz-icon:hover .ip-top-pipe {
    animation: pipeTap 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* ==========================================
   키프레임 매직 (하이테크 테마)
========================================== */

/* 전구가 켜지며 통통 튕기는 모션 */
@keyframes bulbLightUp {
    0% { transform: scale(1); }
    35% { transform: scale(0.93, 0.95); }
    70% { transform: scale(1.04, 1.06); }
    100% { transform: scale(1); }
}

/* 좌측 칩 수축 후 외곽 스플래시 바운스 */
@keyframes chipBounceLeft {
    0% { transform: translateX(0) scale(1); }
    40% { transform: translateX(2px) scale(0.9); }  /* 전구로 살짝 흡수 */
    75% { transform: translateX(-4px) scale(1.05); } /* 밖으로 탁 튕김 */
    100% { transform: translateX(0) scale(1); }
}

/* 우측 칩 수축 후 외곽 스플래시 바운스 */
@keyframes chipBounceRight {
    0% { transform: translateX(0) scale(1); }
    40% { transform: translateX(-2px) scale(0.9); }
    75% { transform: translateX(4px) scale(1.05); }
    100% { transform: translateX(0) scale(1); }
}

/* 상단 노드 파이프 진동 */
@keyframes pipeTap {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px) scaleY(1.03); }
    100% { transform: translateY(0); }
}
/* 1. 상위 엘리먼트 (48px x 48px 컨테이너) */
.icon-wrapper {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 영역 시각화용 (필요 없으면 삭제) */
    /* background-color: #f0f0f0;  */
    /* border-radius: 8px; */
}

/* 2. SVG 아이콘 기본 설정 */
.inori-icon {
    width: 36px;  /* 원본 사이즈 유지 */
    height: 34px;
    overflow: visible; /* 화살표가 밖으로 튕겨 나갈 때 잘리지 않도록 함 */
}

/* 3. 각 부품별 애니메이션 설정 (호버 시 작동) */

/* [화살표] 더 크고 탄성 있게 통통 튀는 애니메이션 */
.biz-card > a:hover .icon-wrapper .inori-arrow,
.icon-container:hover .inori-arrow {
    animation: arrow-bounce-extreme 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* [모니터 프레임 외 도형] 뒤따라서 가볍게 튕기는 애니메이션 */
.biz-card > a:hover .icon-wrapper .inori-body,
.icon-container:hover .inori-body {
    /* 화살표보다 0.1초 늦게 시작하여 시차 발생 */
    animation: body-bounce-soft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

/* 4. 애니메이션 키프레임 정의 */

/* 화살표: 우상단으로 크게 튕겼다가 제자리로 돌아옴 */
@keyframes arrow-bounce-extreme {
    0% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(6px, -6px) scale(1.1); } /* 멀리, 조금 크게 */
    100% { transform: translate(0, 0) scale(1); } /* 제자리 */
}

/* 바디: 제자리에서 위로 살짝 떴다가 내려오면서 탄성 표현 */
@keyframes body-bounce-soft {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3px) scale(1.02); } /* 위로 가볍게, 아주 미세하게 커짐 */
    100% { transform: translateY(0) scale(1); } /* 제자리 */
}

/* 반응형 — 카드 폭 가변 */
@media (max-width: 1680px) {
  .biz-grid {
    grid-template-columns: repeat(4, minmax(0, var(--biz-card-w)));
    column-gap: clamp(16px, 2vw, 35px);
  }
}
@media (max-width: 1280px) {
  .biz-grid { grid-template-columns: repeat(3, 1fr); }
  .biz-card { width: 100%; min-height: 360px; }
    row-gap:0px; column-gap: 0;
}
@media (max-width: 768px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
  /*.biz-card { padding: 36px; min-height: 300px; border-radius: 32px; }*/
  .business .sec-head .title { font-size: 36px; }
}
@media (max-width: 480px) {
  .biz-grid { grid-template-columns: 1fr; }
  .hero {background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.65) 100%), url('/resources/images/ezpmp/mainVisualM.png')  no-repeat 50% 50% / cover;}

}

/* ===== OUR WORKS — Figma 42:178 (1920×5826) 정밀 매칭 ===== */
.works {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--works-section-pt) 0 var(--works-section-pb);
}
.works > .container {
  max-width: none;
  padding-left:  var(--works-section-px);
  padding-right: var(--works-section-px);
}
.works .sec-head {
  margin-bottom: var(--works-section-gap);
}
.works .sec-head .eyebrow { display: none; }   /* Figma 시안엔 없음 */
.works .sec-head .title {
  font-family: var(--font-family-nav);          /* Urbanist */
  font-size:   var(--biz-title-fs);             /* 52 (Business 와 동일) */
  line-height: 1.0;
  font-weight: var(--biz-title-fw);             /* 600 */
  color: #FFFFFF;
  letter-spacing: 0;
  margin: 0;
}
/* 사업부별 블록 — 한 블록 = 1620+padding, 큰카드+작은카드 2장 + 1px 구분선 */
.works-block {
  border-bottom: 1px solid var(--works-divider);
  padding-bottom: var(--works-block-gap);       /* 64 */
  margin-bottom:  var(--works-block-gap);       /* 64 */
}
.works-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* 큰카드 + 작은카드 2장 가로 분할
 * 사용자 지침 (2026-05-24): 화면이 넓어져도 main/sub01/sub02 간격이 균일하게 유지
 * → justify-content space-between (가변 gap) 제거 → center + 고정 gap 34
 */
.works-row {
  display: grid;
  grid-template-columns: var(--works-big-w) var(--works-big-w);
  justify-content: center;                      /* 중앙 정렬 — 가변 빈공간 양옆에 배분 */
  column-gap: var(--works-row-gap);             /* 34 — 고정, screen-width 와 무관 */
  row-gap: var(--works-stack-gap);              /* 34 */
}
/* 큰 카드 — 802×998 / radius 50 / 좌하단 사업부 라벨 overlay */
.work-big {
  position: relative;
  width: var(--works-big-w);
  height: var(--works-big-h);
  border-radius: var(--works-big-radius);
  overflow: hidden;
  background: var(--works-card-bg);
}
.work-big .thumb,
.work-big .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.work-big::after {
  /* 오렌지 progressive blur 효과 (시안 BACKGROUND_BLUR 4) */
  content: '';
  position: absolute; inset: 0;
  background: var(--works-overlay-grad);
  pointer-events: none;
}
/* 큰카드 사업부 라벨 + 화살표 (좌하단 overlay) */
.work-big .label {
  position: absolute;
  left:  48px;
  bottom: 48px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family);              /* Pretendard */
  font-size:   var(--works-label-fs);           /* 32 */
  font-weight: var(--fw-semibold);              /* 600 */
  line-height: 1.0;
  color: #FFFFFF;
  text-decoration: none;
}
.work-big .label::after {
  content: '';
  width: var(--works-label-arrow);
  height: var(--works-label-arrow);
  display: inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23F8F8F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 24h22M28 16l8 8-8 8'/></svg>") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease);
}
.work-big .media-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.work-big video,
.work-big img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* 비율에 맞춰 꽉 채움 */
    transition: opacity 0.4s ease; /* 전환 효과 */
}

/* 비디오가 이미지 위에 배치되도록 설정 */
.work-big video {
    z-index: 2;
}
.work-big img {
    z-index: 1;
}

/* --- 마우스 호버 시 영상 가리기 --- */
.work-big:hover .media-wrapper video {
    opacity: 0; /* 영상을 투명하게 만듦 */
}

/* --- 불투명 설명 레이어 (Hover Overlay) --- */
.work-big .hover-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /*background-color: rgba(0, 0, 0, 0.85);*/ /* 85% 불투명 검정 배경 */
    background:linear-gradient(180deg, rgba(227, 107, 68, 0.50) 0%, rgba(227, 107, 68, 0.60) 32.21%, #AF583C 78.37%);
    color: #fff;
    z-index: 10; /* 미디어 요소들 위에 배치 */

    /* 텍스트 중앙 정렬을 위한 Flexbox */
    display: flex;
    justify-content: center;
    align-items: flex-end;

    /* 기본 상태는 숨김 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.work-big .hover-overlay.red {background:linear-gradient(180deg, rgba(227, 107, 68, 0.50) 0%, rgba(227, 107, 68, 0.60) 32.21%, #AF583C 78.37%);}
.work-big .hover-overlay.blue {background:linear-gradient(180deg, rgba(33, 157, 200, 0.50) 0%, rgba(33, 157, 200, 0.60) 32.21%, #24799D 78.37%);}
.work-big .hover-overlay.cyan {background:linear-gradient(180deg, rgba(41, 178, 183, 0.50) 0%, rgba(41, 178, 183, 0.60) 32.21%, #09818B 78.37%);}
.work-big .hover-overlay.purple {background:linear-gradient(180deg, rgba(165, 92, 185, 0.50) 0%, rgba(165, 92, 185, 0.60) 32.21%, #8C4C9E 78.37%);}
.work-big .hover-overlay.pink {background:linear-gradient(180deg, rgba(214, 111, 109, 0.50) 0%, rgba(214, 111, 109, 0.60) 32.21%, #B95856 78.37%);}
.work-big .hover-overlay.green {background:linear-gradient(180deg, rgba(200, 214, 197, 0.50) 0%, rgba(50, 79, 61, 0.60) 32.21%, #3C5E49 78.37%);}
.work-big .hover-overlay.cyan2 {background:linear-gradient(180deg, rgba(33, 157, 200, 0.50) 0%, rgba(33, 157, 200, 0.60) 32.21%, #24799D 78.37%);}
.work-big .hover-overlay.blue2 {background:linear-gradient(180deg, rgba(45, 73, 131, 0.50) 0%, rgba(45, 73, 131, 0.60) 32.21%, #2D4983 78.37%);}
/* --- 마우스 호버 시 설명 레이어 노출 --- */
.work-big:hover .hover-overlay {
    opacity: 1;
    visibility: visible;
}

/* --- 설명 레이어 텍스트 스타일 --- */
.work-big .overlay-text {
    text-align: center;
    padding: 20px 20px 20% 20px;
    width:calc(50% + 150px);
}

.work-big .overlay-text h3 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
}

.work-big .overlay-text p {
    font-size: 16px;
    margin-bottom: 18px;
    line-height: 1.4;
    opacity: 0.8;
}

/* 하단의 기본 라벨 스타일 (원래 구조 유지) */
.work-big .label {
    display: flex;
    margin-top: 10px;
    font-size: 32px;
    font-weight: 500;
    text-align: left;
}
.work-big:hover .label::after { transform: translateX(4px); }
/* 작은카드 영역 (510 폭, 위아래 2장) */
.work-stack {
  display: flex;
  flex-direction: column;
  gap: var(--works-stack-gap);                  /* 34 */
  width: var(--works-big-w);
    justify-content: space-between;
}
/* 작은 카드 — 510×482 / radius 30 / 이미지 + 텍스트 영역 분리 */
.work-small {
  display: flex;
  flex-direction: column;
  gap: 24px;                                    /* Figma itemSpacing 24 */
  width: var(--works-small-w);
  background: transparent;                      /* 카드 자체는 투명, 썸네일 박스만 색상 */
}
.work-stack .work-small:nth-child(2n) { margin-left:auto}
.work-small .thumb {
  position: relative;
  width: var(--works-small-w);
  height: 382px; /*305px;*/                                /* Figma 510×382 */
  border-radius: var(--works-small-radius);     /* 30 */
  overflow: hidden;
  background: var(--works-card-bg);
}
.work-small .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.work-small .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: var(--works-overlay-grad);
  pointer-events: none;
}
.work-small .meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: static;
  padding: 0;
}
.work-small .ttl {
  display: block;
  font-family: var(--font-family);              /* Pretendard */
  font-size:   var(--works-title-fs);           /* 20 */
  font-weight: var(--fw-semibold);              /* 600 */
  line-height: var(--works-title-lh);           /* 1.0 */
  letter-spacing: var(--works-title-ls);        /* -0.02em */
  color: #FFFFFF;
}
.work-small .desc {
  display: block;
  font-family: var(--font-family);
  font-size:   var(--works-desc-fs);            /* 14 */
  font-weight: var(--fw-regular);
  line-height: var(--works-desc-lh);            /* 1.55 */
  letter-spacing: var(--works-desc-ls);         /* -0.02em */
  color: var(--works-desc-color);               /* #CBCBCB */
    word-break:auto-phrase;
}
.work-small::after { content: none; }            /* 옛 오버레이 제거 */

/* 호버 */
.work-big:hover .thumb img,
.work-small:hover .thumb img {
  transform: scale(1.04);
  transition: transform var(--dur-slow) var(--ease);
}

/* 반응형 */
@media (max-width: 1680px) {
  .works-row {
    grid-template-columns: minmax(0, var(--works-big-w)) minmax(0, var(--works-small-w));
    column-gap: clamp(24px, 2.7vw, 46px);
  }
}
@media (max-width: 1280px) {
  .works-row { grid-template-columns: 1.5fr 1fr; }
  .work-big  { width: 100%; height: auto; aspect-ratio: 802/998; }
  .work-stack, .work-small { width: 100%; }
  .work-small .thumb { width: 100%; height: auto; aspect-ratio: 510/382; }
}
@media (max-width: 768px) {
  .works-row { grid-template-columns: 1fr; row-gap: 24px; }
  .work-big { aspect-ratio: 4/3; border-radius: 32px; }
  .work-big .label { left: 28px; bottom: 28px; font-size: 24px; }
  .work-big .label::after { width: 36px; height: 36px; }
  .work-small .thumb { border-radius: 20px; }
  .works .sec-head .title { font-size: 36px; }
    .work-big .overlay-text h3 { margin-bottom:10px;}
    .work-big .overlay-text p { margin-bottom:8px;}
}

/* ===== PARTNERSHIPS — Figma 42:355 (1920×734) ============ */
.partners {
  background: var(--color-bg-dark);             /* #252525 다크 */
  color: var(--color-text-on-dark);
  padding: var(--partners-py) 0;
  overflow: hidden;                           /* 캐러셀이 viewport 넘어 흐름 */
}
.partners > .partners-head-wrap {
  max-width: none;
  padding-left:  var(--partners-px);
  padding-right: var(--partners-px);
}
.partners-head {
  text-align: left;
  margin-bottom: var(--partners-gap);          /* 100 */
}
/* Figma 42:357 정확 매칭 — Urbanist SemiBold 52.64/65.8 오렌지 #F1592A */
.partners-cap {
  font-family:  var(--font-family-nav);        /* Urbanist */
  font-size:    var(--partners-title-fs);      /* clamp 36-52 */
  line-height:  var(--partners-title-lh);      /* 1.25 */
  font-weight:  600;
  /*color:        var(--partners-title-color);*/   /* #F1592A */
  margin: 0;
  letter-spacing: 0;
}
/* 2행 슬라이딩 로고 캐러셀 (new_home_page4 ez_partnership_track 스타일) */
.partners-track {
  display: flex; flex-direction: column;
  gap: 24px;
  width: 100%;
  overflow: hidden;
}
.partner-row {
  display: inline-flex;
  gap: 24px;                                    /* Figma 카드 사이 약간의 갭 */
  white-space: nowrap;
  width: max-content;                          /* 자식 폭의 합 */
  will-change: transform;
}
.partner-row--ltr { animation: partner-marquee-ltr 40s linear infinite; }
.partner-row--rtl { animation: partner-marquee-rtl 40s linear infinite; }
@keyframes partner-marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }        /* 14 카드 중 절반 = 7 카드 만큼 이동 후 반복 */
}
@keyframes partner-marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* 호버 시 일시정지 */
.partners-track:hover .partner-row { animation-play-state: paused; }

/* 로고 카드 — Figma 284×110 / bg #383838 / radius 15 / padding 16 */
.logo-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 284px;
  height: 110px;
  background: #383838;
  border-radius: 15px;
  padding: 16px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease);
}
.logo-cell:hover { background: #424242; }
/* 텍스트 placeholder (사용 안할 때) */
.logo-cell i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 252px;
  height: 78px;
  font-style: normal;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
}
/* 실제 로고 picture/img */
.logo-cell picture {
  display: inline-flex; align-items: center; justify-content: center;
  width: 252px;
  height: 78px;
}
.logo-cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: brightness(1.1);
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.logo-cell:hover img {
  opacity: 1;
  filter: brightness(1.2);
}

@media (max-width: 768px) {
  .logo-cell  { width: 200px; height: 80px; padding: 12px; }
  .logo-cell i{ width: 176px; height: 56px; }
}

/* ===== WHY EZPMP — Figma 42:583 (1920×690, 풀-블리드 배너) ==== */
.why {
  position: relative;
  height: var(--why-h);                        /* 690 데스크탑 */
  color: var(--color-text-on-dark);
  background:
    var(--why-overlay),
    url('../../images/ezpmp/whyEzpmp.png') no-repeat 50% 50% / cover;
  background-color: #1A1A1A;
  overflow: hidden;
}
.why > .container {
  max-width: none;
  padding-left:  var(--why-px);
  padding-right: var(--why-px);
  height: 100%;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
  height: 100%;
}
/* 좌측 — "Why" + "EZPMP" 2-line big title */
.why-title {
  font-family: var(--font-family-nav);          /* Urbanist */
  font-size:   var(--why-title-fs);             /* 114 */
  line-height: var(--why-title-lh);             /* 1.0 */
  font-weight: var(--why-title-fw);             /* 600 */
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  display: flex; flex-direction: column;
}
.why-title .eyebrow {
  font-size: var(--why-eyebrow-fs);             /* 90 */
  font-weight: var(--why-eyebrow-fw);           /* 400 Regular */
  color: #FFFFFF;
  margin-right: 0;
  display: block;
}
.why-title .brand {
  color: var(--color-primary);                  /* 오렌지 EZPMP */
  display: block;
}
/* 우측 — 4가지 가치 리스트 */
.why-list { display: flex; flex-direction: column; gap: var(--why-item-gap); }   /* 62 */
.why-item {
  display: flex; align-items: center; gap: var(--why-item-icon-gap);            /* 16 */
  padding: 0;
  border-top: 0;
}
.why-item:first-child { padding-top: 0; }
.why-item::before {
  /* Polygon 자리에 오렌지 삼각형 ▶ */
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
}
.why-item .num { display: none; }                /* Figma 시안엔 번호 없음 */
.why-item h4 {
  font-family: var(--font-family-nav);           /* Urbanist */
  font-size:   var(--why-item-fs);               /* 30 */
  font-weight: var(--why-item-fw);               /* 500 */
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
}
.why-item p { display: none; }                    /* Figma 시안엔 본문 없음 */

@media (max-width: 1280px) {
  .why { height: auto; min-height: 560px; padding: 80px 0; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
}
@media (max-width: 768px) {
  .why { padding: 60px 0; }
  .why-item h4 { font-size: 22px; }
}

/* ===== CONTACT US — Figma 42:604 (1920×648) ============== */
.contact {
  background: var(--partners-bg);             /* #1A1A1A */
  color: var(--color-text-on-dark);
  padding: var(--contact-py) 0;
}
.contact > .container {
  max-width: none;
  padding-left:  var(--contact-px);
  padding-right: var(--contact-px);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--contact-gap);                      /* clamp 60-439 */
  align-items: start;
}
.contact-head { padding-top: 36px; }            /* Figma paddingTop */
.contact-head .eyebrow { display: none; }       /* Figma 시안엔 eyebrow 없음 */
.contact-head .title {
  font-family: var(--font-family-nav);          /* Urbanist */
  font-size:   var(--contact-title-fs);         /* 52 */
  line-height: 1.0;
  font-weight: var(--contact-title-fw);         /* 600 */
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0;
}
.contact-head p {
  margin-top: 72px;                             /* Figma itemSpacing 72 */
  color: var(--color-text-on-dark-soft);
  font-family: var(--font-family);
  font-size:   var(--contact-desc-fs);          /* 14 */
  line-height: var(--contact-desc-lh);          /* 1.55 */
  max-width: 56ch;
}
.contact-form { display: flex; flex-direction: column; gap: var(--contact-form-block-gap); }
.contact-form .fields {
  display: flex; flex-direction: column;
  gap: var(--contact-form-gap);                 /* 24 */
}
.contact-form .fields .fields-sub {
    display: flex;
    gap: 10px;
    align-items: center;
}
.contact-form .fields .fields-sub span {
    min-width:110px;
}
.contact-form .hint {
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--color-text-on-dark-mute);
}
.contact-form .submit-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0;
  gap: 24px;
}
.contact-form .submit-row .btn-dark {
  height: var(--contact-btn-h);                 /* 48 */
  border-radius: var(--contact-btn-radius);     /* 10 */
  font-size: var(--contact-btn-fs);             /* 16 */
  font-weight: var(--fw-medium);
  padding-left: 24px;                           /* Figma paddingLeft */
}
@media (max-width: 1280px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .contact { padding: 60px 0; }
  .contact-head .title { font-size: 36px; }
  .contact-head p { margin-top: 32px; max-width: none; }
  .contact-form .submit-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .contact-form .submit-row .btn-dark { width: 100%; justify-content: center; }
  .contact-form .fields .fields-sub {align-items: flex-start;flex-direction: column;}
}
@media (max-width: 480px) {
  .contact-head .title { font-size: 28px; }
  .field, textarea.field { font-size: 14px; }
}

/* ===== 모바일 감사 보강 — Hero/Works/Partners ============= */
/* Hero 1024 → 모바일 진입 직전 텍스트 축소 + 데코라인 정렬 */
@media (max-width: 1024px) {
  .hero-title { max-width: none; }
  .hero-deco { width: clamp(180px, 30vw, 220px); }
}
@media (max-width: 480px) {
  .hero { min-height: clamp(420px, 75vh, 560px); }
  .hero-eyebrow { margin-top: var(--space-10); }
  .hero-title { font-size: clamp(28px, 8vw, 40px); }
  .hero-desc { font-size: 14px; }
    .hero-slider video {
        object-fit:cover;
        min-height:clamp(420px, 75vh, 560px);
    }
}

/* Works 480 — 1컬럼 + 카드 폭 100% 강제 */
@media (max-width: 480px) {
  .works-row { row-gap: 16px; }
  .work-big, .work-stack, .work-small { width: 100%; }
  .work-big { aspect-ratio: 4/5; border-radius: 24px; }
  .work-big .label { font-size: 20px; left: 20px; bottom: 20px; gap: 6px; }
  .work-big .label::after { width: 28px; height: 28px; }
  .work-small .thumb { border-radius: 16px; aspect-ratio: 16/12; }
  .work-small .ttl  { font-size: 16px; }
  .work-small .desc { font-size: 13px; line-height: 1.5; }
  .works .sec-head .title { font-size: 28px; }
  .works-block { padding-bottom: 40px; margin-bottom: 40px; }
}

/* Partners 1280 / 768 / 480 — 누락 분기 보강 */
@media (max-width: 1280px) {
  .partners { padding: 80px 0; }
  .partners-head { margin-bottom: 60px; }
  .partners-cap { font-size: clamp(28px, 4vw, 44px); }
}
@media (max-width: 768px) {
  .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .partners-cap { font-size: 28px; }
}
@media (max-width: 480px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-cap { font-size: 24px; line-height: 1.3; }
}

/* Why 768 (이미 일부) — 작은 화면 보강 */
@media (max-width: 480px) {
  .why { padding: 48px 0; min-height: auto; height: auto; }
  .why-title .eyebrow { font-size: 40px; }
  .why-title .brand   { font-size: 56px; }
  .why-item h4 { font-size: 18px; }
  .why-list { gap: 24px; }
}

/* Footer 480 — 1컬럼 + 카피 정렬 */
@media (max-width: 480px) {
  .site-footer { padding: 40px 0; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { font-size: 11px; }
  .footer-bottom .links { gap: 16px; flex-wrap: wrap; }
}