/* ============================================================
   영어 문구 길이 보정 (한국어 원본 대비 텍스트가 길어지며 생긴 간격 문제만 수정)
   디자인 요소(색·폰트 크기·레이아웃)는 원본 그대로 유지
   ============================================================ */

/* 히어로 백그라운드 비디오: YouTube 워터마크/로고 숨김
   주의 1: Elementor 기본값이 `transform: translate(-50%,-50%)` (중앙 정렬) 이므로
           scale 을 덮어쓰면 좌측으로 쏠린다 → translate 를 유지한 채 scale 을 뒤에 붙인다.
   주의 2: Elementor 의 `.elementor .elementor-hidden-mobile{display:none}` 은 media query 가 없어
           모든 뷰포트에서 영상을 감춘다 → 데스크톱/모바일 모두 표시되도록 override 한다. */
.elementor-background-video-container iframe {
  pointer-events: none !important;
}
.elementor-background-video-embed {
  overflow: hidden !important;
}
.elementor-background-video-container {
  overflow: hidden !important;
}
/* 영상 배경이 항상 보이도록 Elementor 전역 숨김 규칙 해제
   (데스크톱: `.elementor .elementor-hidden-mobile{display:none}`
    모바일: `@media(max-width:767px){:is(.e-con,...).elementor-background-video-container.elementor-hidden-mobile{display:none}}`
    → 모바일 쿼리까지 덮어써야 하므로 동일 쿼리 안에서 더 높은 선택자로 재정의) */
.elementor .elementor-background-video-container.elementor-hidden-mobile {
  display: block !important;
}
@media (max-width: 767px) {
  .elementor .elementor-section > .elementor-background-video-container.elementor-hidden-mobile,
  .elementor .elementor-background-video-container.elementor-hidden-mobile {
    display: block !important;
  }
}
/* 중앙 정렬 유지 + 살짝 확대해 유튜브 워터마크 영역을 프레임 밖으로 밀어냄 */
.elementor-background-video-container iframe[src*="youtube"] {
  transform: translate(-50%, -50%) scale(1.06) !important;
  transform-origin: center center !important;
}

/* 히어로: 알리페이/위챗페이 아이콘과 본문 사이 호흡 확보 */
.elementor-element-cc0d163 .elementor-widget-container {
  margin-bottom: 16px;
}

/* 히어로 본문: 원본 폭 유지 (별도 제한 없음) */

/* 히어로 H1 가울쎄 정렬 (2줄) */
.jet-headline__second .jet-headline__label,
.jet-headline__first .jet-headline__label {
  text-align: center;
  display: block;
}

/* 히어로 메인 헤드라인: "Integrated Payment Solutions for International Customers"
   원본 3.7rem(55.5px) → 72px 로 대폭 확대하여 헤드라인 타이틀 스케일에 맞게 */
.jet-headline__second .jet-headline__label {
  font-size: 72px !important;
  line-height: 1.1em !important;
  letter-spacing: -3px !important;
}

/* 히어로 상단 서브타이틀: Global Payments Payro 크기 축소 */
.jet-headline__first .jet-headline__label {
  font-size: 0.75em !important;
  opacity: 0.9 !important;
}

/* ============================================================
   영어 가독성 보정 — 줄간격·단락 간격·여백 확보
   ============================================================ */

/* 전체 H1/H2 두껍게 (FAQ H1 + 모든 섹션 H2) */
body h1 { font-weight: 800 !important; }
body h2 { font-weight: 700 !important; }

/* 전체 본문 기본 줄간격 향상 */
body .elementor-widget-text-editor .elementor-widget-container p,
body .elementor-widget-container p,
body p {
  line-height: 1.75 !important;
}

/* 히어로 소개 문단 → 수평 캐러셀 (좌우 방향 아이콘으로 슬라이드)
   - 각 단락이 별도 슬라이드 카드로 표시
   - 화살표 버튼으로 좌→우 스크롤
   - 폭은 헤드라인(741px) 좌우 라인에 맞춤 */
body .elementor-element-3302fae > .elementor-widget-container {
  max-width: 741px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body .elementor-element-3302fae .elementor-widget-container {
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* 캐러셀 컨테이너 */
.payro-hero-carousel {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

/* 진행 도트 (자동재생 위치 표시) */
.payro-carousel-dots {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.payro-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.payro-carousel-dot:hover {
  background: rgba(255,255,255,0.6);
}
.payro-carousel-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: #fff;
}

/* 뷰포트: 이 요소가 고정된 클리핑 창 역할을 한다.
   (트랙 자체에 overflow:hidden 을 주면 transform 과 겹쳐
    클리핑 창이 같이 밀려나가 화면 밖으로 사라진다.) */
.payro-carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* 트랙: 슬라이드를 '겹쳐 쌓는' 그리드
   - 모든 슬라이드가 같은 칸(1/1)에 놓이므로 컨테이너 높이는 자동으로
     '가장 긴 슬라이드' 높이가 된다 → 전환 중에도 레이아웃이 흔들리지 않는다.
   - 실제 시간·간격은 JS(2.6초 간격 / 0.62초 이동)에서 제어. */
.payro-carousel-track {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  touch-action: pan-y;      /* 세로 스크롤은 유지, 가로만 직접 처리 */
  -webkit-user-select: none;
  user-select: none;
}
.payro-carousel-viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

/* 각 슬라이드 — 같은 칸에 겹쳐 두고, 위치·투명도로 등·퇴장을 표현한다 */
.payro-carousel-slide {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 0;
  pointer-events: none;
}

/* ── 우 → 좌 슬라이드 ────────────────────────────────────────────
   요청: 새 슬라이드가 화면 '오른쪽에서 왼쪽으로' 밀고 들어오는 형태.

   상태를 '위치' 로만 3가지 관리한다. 방향은 JS 가 어느 쪽 클래스를
   주느냐로 결정되므로 CSS 는 방향을 모른다.
     is-active : 제자리 (translate 0)
     is-right  : 오른쪽 대기/퇴장 (+100%)
     is-left   : 왼쪽 대기/퇴장 (-100%)

   다음(자동재생·→) = is-right → is-active,  현재 → is-left   = 오른쪽에서 왼쪽으로
   이전(←)         = is-left  → is-active,  현재 → is-right  = 왼쪽에서 오른쪽으로

   왜 '뷰포트 100%' 인가:
     글자 폭(636.8px)이 뷰포트(641px)와 거의 같아 100% 미만으로 밀면
     두 텍스트 덩어리가 화면 안에서 겹쳐 보인다. 정확히 100% 밀면
     한쪽은 완전히 밖으로 나가고 다른 쪽만 들어와 겹침이 없다.

   불투명도는 보조로만 쓴다(1 ↔ 0):
     밀어내기만 하면 뷰포트 가장자리에서 글자가 뚝 끊겨 보인다.
     양쪽이 같은 시간·같은 곡선으로 반대 방향으로 가므로 두 슬라이드의
     불투명도 합이 1.0 에서 벗어나지 않는다(실측 전 구간 sumO=1.000).
     ※ 예전에 합이 0.18 까지 떨어져 2초마다 깜빡이던 설계와 다르다. */
.payro-carousel-slide {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  /* 위치 + 보조 페이드 — 나가는·들어오는 양쪽이 같은 시간·같은 곡선 */
  transition:
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

/* 제자리 */
.payro-carousel-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  z-index: 2;
}

/* 오른쪽으로 밀려난/대기 중 */
.payro-carousel-slide.is-right {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

/* 왼쪽으로 밀려난/대기 중 */
.payro-carousel-slide.is-left {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

/* 스크립트가 없거나 실패하면 모든 슬라이드가 opacity:0 이라 영역이 비어 보인다.
   JS 가 초기화를 마치면 트랙에 is-ready 를 붙이고, 그 전까지는 첫 장만 보여 준다. */
.payro-carousel-track:not(.is-ready) .payro-carousel-slide:first-child {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 화면 밖(±100%)은 뷰포트(overflow:hidden)가 잘라낸다.
   여기서 visibility:hidden 을 쓰면 '나가는 슬라이드'가 즉시 사라져
   밀려 나가는 동작 자체가 보이지 않으므로 쓰지 않는다. */

@media (prefers-reduced-motion: reduce) {
  .payro-carousel-slide {
    transition: opacity 200ms linear;
    transform: none !important;
  }
}
.payro-carousel-slide p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #fff;
  text-align: center;
}

/* 방향 아이콘 버튼 */
.payro-carousel-arrow {
  flex: 0 0 auto;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 5;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.payro-carousel-arrow:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.1);
}
.payro-carousel-arrow:active {
  transform: scale(0.95);
}
.payro-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.payro-carousel-arrow--prev {
  margin-right: 10px !important;
}
.payro-carousel-arrow--next {
  margin-left: 10px !important;
}
/* Elementor 전역 svg 스타일이 width를 덮어쓰므로 !important 로 강제 */
.payro-carousel-arrow svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

/* 서비스 카드/프로세스 단계 등 본문 단락 여백 */
body .elementor-widget-container p + p {
  margin-top: 10px !important;
}

/* 리스트 항목 간격 확보 */
body .elementor-widget-container ul li,
body .elementor-widget-container ol li,
body ul li,
body ol li {
  margin-bottom: 6px !important;
  line-height: 1.7 !important;
}

/* 푸터: 영문 법정 표기가 한 줄에 몰리지 않도록 줄간격 보정 */
body .elementor-element-32a3935a .elementor-widget-container,
body .elementor-element-32a3935a .elementor-widget-container p {
  line-height: 1.9 !important;
}

/* ============================================================
   모바일 가독성 보정 (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
  /* 전체 본문: 모바일에서 최소 15px 확보 */
  body .elementor-widget-text-editor .elementor-widget-container p,
  body .elementor-widget-container p,
  body p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* 히어로 메인 헤드라인: 모바일에서 확대 (원본 ~34px → 42px) */
  .jet-headline__second .jet-headline__label {
    font-size: 42px !important;
    line-height: 1.15em !important;
    letter-spacing: -1.5px !important;
  }

  /* 히어로 소개 캐러셀: 모바일에서 전체 폭 사용 */
  body .elementor-element-3302fae > .elementor-widget-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .elementor-element-3302fae .elementor-widget-container {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  .payro-carousel-slide p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  .payro-carousel-arrow {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .payro-carousel-arrow svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* 서비스 카드 제목 */
  body .elementor-widget-heading .elementor-heading-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* 서비스 카드 본문: 카드 안에 여유 있게 */
  body .elementor-element .elementor-widget-text-editor .elementor-widget-container p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* 프로세스 단계 제목 */
  body .elementor-element .elementor-widget-heading h3,
  body .elementor-element .elementor-widget-heading h4 {
    font-size: 20px !important;
  }

  /* 프로세스 단계 본문 */
  body .elementor-element .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* FAQ 질문 */
  #payro-faq summary {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* FAQ 답변 */
  #payro-faq .payro-faq-answer {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* 푸터 — 13px 이면 'Business Registration No.: 643-88-00687'(367px)가
     430px 이하 뷰포트(컨텐츠 400px→360px)에서 한 줄에 안 들어가
     재줄바꿈되며 끝 단어만 다음 줄로 떨어진다. 12px 로 낮춰 방지. */
  body .elementor-element-32a3935a .elementor-widget-container,
  body .elementor-element-32a3935a .elementor-widget-container p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
}

/* 431~767px 는 컨텐츠 폭이 401px 이상이라 13px 로도 한 줄에 다 들어간다.
   원래 크기(13px)를 유지해 데스크톱과의 연속성을 지킨다. */
@media (min-width: 431px) and (max-width: 767px) {
  body .elementor-element-32a3935a .elementor-widget-container,
  body .elementor-element-32a3935a .elementor-widget-container p {
    font-size: 13px !important;
  }
}

/* ============================================================
   검색 아이콘 — 웹폰트 글리프( \e8b6 ) 대신 인라인 SVG 사용
   ------------------------------------------------------------
   문제: 테마 기본값은 `content:"\e8b6"; font-family:Astra` 인데,
         이 웹폰트가 로드되지 않으면 빈 네모(tofu) 박스로 보인다.
   해결: 글리프를 끄고 SVG 만 그린다. SVG 는 폰트와 무관하게 항상 렌더된다.
   ============================================================ */
.astra-search-icon::before,
.ast-search-menu-icon .astra-search-icon::before {
  content: none !important;
}
.ast-icon.icon-search {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.ast-icon.icon-search svg {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  margin: 0 !important;
  opacity: 1 !important;
}
/* 클릭 영역을 아이콘 크기에 맞춰 넉넉하게 */
li.search-custom-menu-item .astra-search-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin: -6px;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
li.search-custom-menu-item .astra-search-icon:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.06);
}

/* ============================================================
   모바일 메뉴 — 흰 글씨 / 흰 배경 충돌 해결
   ------------------------------------------------------------
   증상: 모바일(≤921px)에서 햄버거를 열면 메뉴가 '빈 판'처럼 보인다.
         (사용자 제보 스크린샷: y=75~226 이 #f9f9f9 단색, 글자 없음)

   원인: 두 규칙이 서로를 모른 채 겹쳐 있었다.
     1) Astra 테마 (style.min.css):
          .ast-header-break-point .main-header-menu { background-color:#f9f9f9 }
        → 펼친 메뉴판 바탕을 '거의 흰색'으로 칠한다.
     2) 이 페이지의 커스텀 테마(투명 헤더 + 다크 히어로):
          .main-header-menu .menu-link { color:#fff }
        → 메뉴 글씨는 흰색.

       흰 글씨 / #f9f9f9 배경 = 대비 1.05:1  →  사실상 투명.
       (참고: WCAG AA 본문 기준은 4.5:1)

   왜 '글씨를 검게'가 아니라 '배경을 어둡게'인가:
     헤더가 다크 히어로 영상 위에 투명으로 떠 있고 로고도 흰색이라,
     메뉴판만 흰색으로 뜨면 헤더와 따로 논다. 배경을 어둡게 두면
     기존 흰 글씨·호버·현재페이지 색을 하나도 건드리지 않아
     데스크톱 동작과 완전히 동일한 상태가 유지된다.
     흰 글씨 / #1e1c33 = 16.6:1

   범위: `ast-header-break-point` 는 Astra 가 '모바일 헤더 모드'에서만
         body 에 붙이는 클래스다(이 사이트에선 ≤921px).
         → 이 블록은 데스크톱에 절대 적용되지 않는다.
   ============================================================ */

/* 펼친 메뉴판 바탕: 다크 네이비 (헤더 톤 #26213D 보다 한 단계 어둡게) */
.ast-header-break-point .main-header-menu {
  background-color: #1e1c33 !important;
  /* 테마가 넣던 #e5e5e5 상단 괘선은 다크 배경에서 혼자 밝게 떠 보인다 → 톤 낮춤 */
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 하위 메뉴(현재는 없음)도 같은 바탕으로 — 테마 기본값이 #f9f9f9 이다 */
.ast-header-break-point .main-header-menu .sub-menu {
  background-color: #1e1c33 !important;
}

/* 항목 구분선: 어두운 배경에 맞춰 '밝은 반투명'으로 반전 */
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  /* 24px → 44px : 손가락 터치 최소 권장치(44px) 확보.
     테마가 .menu-link 를 display:block 으로 두기 때문에, flex 로 바꾸지 않으면
     align-items:center 가 무시되어 글자가 44px 칸의 '맨 위'에 붙는다.
     (실측: 칸 77~121px 인데 글자 잉크는 80.3~96.3px → 위로 11px 치우침) */
  display: flex !important;
  align-items: center;
  min-height: 44px;
}

/* 마지막 항목의 아래 괘선은 메뉴판 하단 경계와 겹쳐 '떠 있는 선'처럼 보인다 */
.ast-header-break-point .main-header-menu > .menu-item:last-of-type > .menu-link {
  border-bottom-color: transparent !important;
}

/* 항목 사이에 6px 틈이 생기면 괘선과 틈이 번갈아 보여 '줄줄이 밑줄'처럼 된다.
   (전역 `body ul li { margin-bottom: 6px }` 규칙이 메뉴 항목에도 걸려 있음)
   → 메뉴판 안에서는 틈을 없애 하나의 판으로 붙인다. */
.ast-header-break-point .main-header-menu > .menu-item {
  margin-bottom: 0 !important;
}

/* 호버/포커스 피드백 — 흰 글씨라 배경을 밝히는 방식으로 표시 */
.ast-header-break-point .main-header-menu .menu-item > .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-item.focus > .menu-link,
.ast-header-break-point .main-header-menu .menu-item > .menu-link:focus-visible {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* '현재 페이지' 강조는 넣지 않는다.
   이 사이트는 원페이지(모든 링크가 #앵커)라서 <li> 5개 전부에
   current-menu-item / current_page_item 이 붙어 있다.
   → 항목 하나만 칠하는 강조는 성립하지 않고, 전부 칠하면 메뉴판 전체가
     회색으로 떠 보인다(실측: rgba(255,255,255,.12) × 5 → 배경이
     #1e1c33(30,28,51) 이 아니라 (57,56,76) 으로 밝아짐).
   대신 클릭 지점을 알 수 있도록 좌측 액센트 바로 표시한다. */
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
  box-shadow: inset 0 0 0 0 #7c6cf0;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link {
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 0 #7c6cf0;
}

/* 햄버거 아이콘: 테마 기본값이 파랑(#0170B9)이라 다크 히어로 위에서
   대비 2.9:1 로 흐릿하다(로고·메뉴 글씨는 흰색). 흰색으로 통일. */
.ast-header-break-point .menu-toggle,
.ast-header-break-point .menu-toggle .menu-toggle-icon,
.ast-header-break-point .menu-toggle .ast-icon {
  color: #ffffff !important;
}

/* ============================================================
   푸터 주소 블록 — 모바일 정렬 붕괴 수정
   ------------------------------------------------------------
   증상 (360px 실측):
     Integrated ... Solutions · Payro
     Inc.                                  ← 고아 단어
     | CEO: Jang Young-joo | Business Registration No.: 643-88-
     00687                                 ← 사업자번호가 쪼개짐
     | Address: ... Toegye-ro, Jung-
     gu, Seoul                             ← 주소가 쪼개짐
     ... Main line +82-2-777-
     1003                                  ← 전화번호가 쪼개짐

   원인:
     1) <br> 로 6줄을 하드 고정 → 각 줄이 컨테이너(360px→360/330px) 보다
        길어지면 브라우저가 임의 지점에서 재줄바꿈한다.
        이때 마지막 단어(Inc. / 00687 / 1003)만 다음 줄로 떨어져
        좌우로 튀는 난쟁이 줄이 생긴다.
     2) 줄 앞머리 '|' 가 남아 정렬 기준선을 흐트러뜨린다.

   해결:
     - 767px 이하에서 <br class="pf-br"> 를 display:none 으로 무력화하고,
       대신 각 <span class="pf-i"> 를 블록으로 쌓아 '논리 단위(항목)' 마다
       한 줄씩 잡는다. 항목 안에서만 줄바꿈되므로 고아 단어가 안 생긴다.
     - 모바일에선 앞머리 '|' 를 숨긴다(블록 분리되면 구분자가 무의미).
     - 사업자번호/전화번호는 .pf-nw 로 nowrap 고정 → 절대 쪼개지지 않음.
     - 데스크톱(768px~)은 기존 <br> 레이아웃을 그대로 쓴다(무변경).
   ============================================================ */
@media (max-width: 767px) {
  /* 테마 규칙이 `.elementor-861 .elementor-element.elementor-element-32a3935a`
     (클래스 3개 = 특이도 0,3,0) 이라 클래스 1개짜리 선택자는 전부 무시된다.
     같은 특이도로 맞춰야 자간·줄간격이 실제로 먹는다.
     (폰트 크기는 위쪽 모바일 가독성 블록에서 이미 12px 로 지정) */
  .elementor-861 .elementor-element.elementor-element-32a3935a {
    letter-spacing: -0.2px;
    line-height: 1.6;
  }

  /* 하드 <br> 를 무력화 → 논리 단위(.pf)가 줄을 만든다 */
  .elementor-861 .elementor-element.elementor-element-32a3935a .pf-br,
  .elementor-861 .elementor-element.elementor-element-32a3935a .pf-pipe {
    display: none !important;
  }

  /* 한 항목 = 한 블록.
     항목 안에서만 줄바꿈되므로 'Inc.' / '00687' 같은
     고아 조각이 생기지 않는다. */
  .elementor-861 .elementor-element.elementor-element-32a3935a .pf {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    /* 두 줄로 넘어갈 때 좌우 길이를 균등하게 → 난쟁이 줄 방지 */
    text-wrap: balance;
  }

  /* 사업자번호·전화번호는 어떤 폭에서도 쪼개지지 않게 고정 */
  .elementor-861 .elementor-element.elementor-element-32a3935a .pf-nw {
    white-space: nowrap;
  }

  /* 이메일도 중간에서 끊기지 않게 */
  .elementor-861 .elementor-element.elementor-element-32a3935a .pf > a {
    white-space: nowrap;
    word-break: keep-all;
  }
}