/* ===================================================================
   ehmabuni — BUSINESS / 사업영역 (파노라마)
   기준 : PC 1920 / MO 375
   단위 : 10px = 1rem
   * 파노라마 기능/레이아웃은 testlayout.html 스펙 그대로 (.ehmabuni 스코프)
=================================================================== */
.ehmabuni {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  width: 100%;
  padding: 12rem 0;
  box-sizing: border-box;
  background-color: #f5f6f8;
  overflow-x: hidden;
}

.ehmabuni__head { width: 100%; }


/* ===================================================================
   파노라마 (testlayout.html 이식)
=================================================================== */
.ehmabuni .panorama-slide-con {
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}

.ehmabuni .panorama-slide-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: visible !important;   /* 좌우 카드가 잘리지 않도록 */
  perspective: 200rem;            /* 3D 원근 */
  perspective-origin: 50% 50%;
  padding: 0;
}

.ehmabuni .panorama-slide-wrap .swiper-wrapper {
  align-items: center;
  transform-style: preserve-3d;
  transition-timing-function: linear !important;
}

.ehmabuni .panorama-slide {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ehmabuni .panorama-slide-wrap .swiper-slide {
  width: 44rem;                   /* 데스크탑 카드 폭 (720:930 비율) */
  flex-shrink: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: linear;
}

.ehmabuni .panorama-slide-wrap .swiper-slide .inner {
	padding:0;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  border-radius: 3.6rem 0.6rem 3.6rem 0.6rem;  /* 시안 : TL36 TR6 BR36 BL6 */
  overflow: hidden;
  transition-property: transform;
  transition-timing-function: linear;
}

.ehmabuni .panorama-slide-wrap .swiper-slide .img-box { aspect-ratio: 720 / 930; }


/* ===================================================================
   카드 (시안 반영)
=================================================================== */
.ehmabuni__card {
	cursor: pointer;
  /* touchStartPreventDefault 를 껐으므로(=클릭을 살리려고) 브라우저 기본 동작이
     그대로 살아난다. 링크 드래그앤드롭과 텍스트 선택 둘 다 여기서 막아야
     Swiper 의 스와이프 제스처가 가로채이지 않는다. */
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 4rem;
  box-sizing: border-box;
  text-decoration: none;
  overflow: hidden;
}

/* 배경 이미지 */
.ehmabuni__card-bg {
  position: absolute;
  inset: 0;
  display: block;
}

.ehmabuni__card-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* 딤 : linear-gradient(to top, rgba(0,0,0,.6) 30%, rgba(0,0,0,.2) 70%) */
.ehmabuni__card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.2) 70%);
}

.ehmabuni__card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* 상단 : 번호 + 화살표 */
.ehmabuni__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ehmabuni__card-num {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3rem;
  line-height: 3rem;
  color: #ffffff;
  white-space: nowrap;
}

.ehmabuni__card-arrow {
  display: block;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.ehmabuni__card-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 하단 : 타이틀 + 태그 */
.ehmabuni__card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  overflow: hidden;
}

/* h3 로 쓰므로 브라우저 기본 margin(1em = 40px)을 반드시 지운다 */
.ehmabuni__card-tit {
  margin: 0;
  font-family: "pretendard-700", "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.2rem;
  letter-spacing: -0.04rem;
  color: #ffffff;
  white-space: nowrap;
}

.ehmabuni__card-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
}

.ehmabuni__card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.4rem;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-radius: 9.9rem;
  font-family: "pretendard-400", "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #ffffff;
  white-space: nowrap;
}


/* ===================================================================
   커스텀 커서 (요구사항 9)
=================================================================== */
/* .ehmabuni .panorama-slide-con.is-cursor-on, */
/* .ehmabuni .panorama-slide-con.is-cursor-on * { cursor: none !important; } */

.ehmabuni .panorama-slide-con.is-cursor-on,
.ehmabuni .panorama-slide-con.is-cursor-on * { cursor: pointer !important; }

.ehmabuni__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  margin: -8rem 0 0 -8rem;
  border-radius: 999rem;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
  box-shadow:
    0 0 5rem 0 rgba(0, 0, 0, 0.1),
    inset 0.2rem 0.2rem 1rem 0 rgba(255, 255, 255, 0.6),
    inset -0.4rem -0.4rem 2rem 0 rgba(0, 0, 0, 0.3),
    inset 0.6rem 0.6rem 1rem 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ehmabuni__cursor.is-active {
  opacity: 1;
  transform: scale(1);
}

.ehmabuni__cursor.is-grabbing {
  transform: scale(0.86);
}

.ehmabuni__cursor-ico {
  display: block;
  width: 6.8rem;
  height: 2.4rem;
}

.ehmabuni__cursor-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 터치 디바이스에서는 커스텀 커서 미사용 */
@media (hover: none), (pointer: coarse) {
  .ehmabuni__cursor { display: none; }
  .ehmabuni .panorama-slide-con.is-cursor-on,
  .ehmabuni .panorama-slide-con.is-cursor-on * { cursor: auto !important; }
}
/* ---------- ~1400px ---------- */
@media (max-width: 1400px) {
  .ehmabuni { padding: 9rem 0; gap: 4rem; }
}

/* ---------- ~1024px ---------- */
@media (max-width: 1024px) {
  .ehmabuni { padding: 8rem 0; }

  .ehmabuni .panorama-slide-wrap .swiper-slide { width: 32rem; }
  .ehmabuni .panorama-slide-wrap .swiper-slide .inner { border-radius: 3rem 0.5rem 3rem 0.5rem; }

  .ehmabuni__card { padding: 2.8rem; }
  .ehmabuni__card-num { font-size: 2.2rem; line-height: 2.2rem; }
  .ehmabuni__card-arrow { width: 2.2rem; height: 2.2rem; }
  .ehmabuni__card-info { gap: 1.6rem; }
  .ehmabuni__card-tit { font-size: 3rem; line-height: 4rem; letter-spacing: -0.03rem; }
  .ehmabuni__card-tag { padding: 0.8rem 1.2rem; font-size: 1.4rem; line-height: 2rem; }

  .ehmabuni__cursor { width: 13rem; height: 13rem; margin: -6.5rem 0 0 -6.5rem; }
  .ehmabuni__cursor-ico { width: 5.6rem; height: 2rem; }
}

/* ---------- ~800px ---------- */
@media (max-width: 800px) {
  .ehmabuni { padding: 7rem 0; }

  .ehmabuni .panorama-slide-wrap .swiper-slide { width: 30rem; }

  .ehmabuni__card { padding: 2.4rem; }
  .ehmabuni__card-num { font-size: 2rem; line-height: 2rem; }
  .ehmabuni__card-arrow { width: 2rem; height: 2rem; }
  .ehmabuni__card-tit { font-size: 2.8rem; line-height: 3.6rem; }
  .ehmabuni__card-tag { padding: 0.8rem 1.1rem; font-size: 1.3rem; line-height: 1.8rem; }
}

/* ---------- ~768px : Mobile (375 기준) ---------- */
@media (max-width: 768px) {
  .ehmabuni { padding: 5rem 0; gap: 4rem; }
  .ehmabuni .panorama-slide-con { padding: 0; }
}

/* ---------- ~480px ---------- */
@media (max-width: 480px) {
  .ehmabuni .panorama-slide-wrap .swiper-slide { width: min(76vw, 28rem); }
  .ehmabuni .panorama-slide-wrap .swiper-slide .inner { border-radius: 2.5rem 0.4rem 2.5rem 0.4rem; }

  .ehmabuni__card { padding: 2rem; }
  .ehmabuni__card-num { font-size: 1.8rem; line-height: 1.7rem; }
  .ehmabuni__card-arrow { width: 1.3rem; height: 1.3rem; }
  .ehmabuni__card-info { gap: 1.2rem; }
  .ehmabuni__card-tit { font-size: 2.4rem; line-height: 3.2rem; letter-spacing: -0.024rem; }
  .ehmabuni__card-tags { gap: 0.4rem; }
  .ehmabuni__card-tag {
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
    line-height: 1.6rem;
    backdrop-filter: blur(0.63rem);
    -webkit-backdrop-filter: blur(0.63rem);
  }
}

/* ===================================================================
   iOS Safari 만 backdrop-filter 끄기
   iOS 는 backdrop-filter 가 3D transform(preserve-3d/perspective) 컨텍스트 안에
   있으면 렌더 레이어를 잘못 만들어 흰 여백/아티팩트가 생긴다. 파노라마 카드(3D) 안의
   태그가 정확히 이 경우라, 사업영역 섹션 아래에 아이폰에서만 흰 여백이 나타났다.
   @supports(-webkit-touch-callout:none) 은 iOS 계열에서만 참 — 데스크톱·안드로이드는
   blur 를 그대로 유지하고, iOS 에서만 blur 를 끄고 배경을 약간 진하게 해 가독성을 보완한다.
   파일 맨 끝에 둬서 480px 미디어쿼리보다 뒤(우선)가 되게 한다.
=================================================================== */
@supports (-webkit-touch-callout: none) {
  .ehmabuni__card-tag {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.24);
  }
}