@import url("/v2/css/page/solipron.css");
/* 1020101(영문).css — 컨택센터 / IPRON (영문)
   구조·컴포넌트는 국문 IPRON(020201.css)을 그대로 쓰고, 영문 시안과 다른 값만 여기서 덮는다.
   수치는 design/1020101_IPRON(영문).svg(1920×3603) 실측 기준.

   세로 좌표(아트보드)
     헤더            0 ~   64
     히어로         64 ~  591   (하단 1px #E8ECEF 구분선 591)
     주요 특징     592 ~ 1349   (#FAFBFC)
     기대 효과    1350 ~ 2018
     활용 사례    2019 ~ 2604   (#FAFBFC)
     시스템 구성도 2605 ~ 3403
     푸터         3404 ~                                             */

/* ══ 히어로 ══════════════════════════════════════════════
   국문에 있던 PDF 버튼이 영문 시안에는 없다. 아래 여백만 다시 잡는다.
   히어로 상단 64 + 96 = 배지 160 / 일러스트 하단 493 + 98 + 테두리 1 = 592 */
.ipr-hero--en {
  padding-bottom: 98px;
}

/* 영문은 어절이 길어 국문 폭(570)에서는 4줄이 된다. 시안대로 3줄이 되는 폭 */
.ipr-hero--en .ipr-hero__desc {
  max-width: 620px;
  word-break: normal;
}

/* 히어로 본문은 2문단. 둘째 문단은 부제→본문 간격(21)을 물려받지 않게 0 으로 두어
   문단 사이가 line-height(30) 만큼, 곧 같은 문단의 줄 간격과 같아지게 한다 */
.ipr-hero--en .ipr-hero__desc + .ipr-hero__desc {
  margin-top: 0;
}

/* ══ 섹션 공통 ═══════════════════════════════════════════ */

/* 마지막 섹션은 아래 여백이 넓다 (구성도 하단 3243 → 푸터 3404) */
.ipr-section--last .section__inner {
  padding-bottom: 160px;
}

/* ══ 카드·목록 본문 폭 ═══════════════════════════════════
   국문 줄바꿈에 맞춘 max-width 를 풀고 카드 폭에 맡긴다 */
.ipr-feature__desc,
.ipr-case__desc {
  max-width: none;
}

/* 국문 줄바꿈 기준 폭(430)을 풀고 열 폭(552 - 번호 68)에 맡긴다 */
.ipr-benefit__desc {
  max-width: none;
  word-break: normal;
}

/* ══ 시스템 구성도 ═══════════════════════════════════════
   도형은 ipr-arch-en.svg(시안에서 글자 path 만 제거), 라벨은 그 위에 얹은 실제 텍스트.
   두 레이어가 같은 viewBox(385 2808 1150 436)를 쓰므로 폭이 줄어도 함께 축소된다. */
.ipr-arch {
  position: relative;
}

.ipr-arch__labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

/* 기본값은 <svg> 에 걸어 상속시킨다. text 에 걸면 특이도(0,1,1)가
   개별 라벨 클래스(0,1,0)를 이겨서 색 지정이 먹지 않는다 */
.ipr-arch__labels {
  font-family: var(--font-base);
  fill: var(--color-text);
}

/* 좌측 채널 라벨 : 우측 정렬 x472 */
.ipr-arch__ch text {
  font-size: 14px;
  text-anchor: end;
}

/* 구름 안 라벨 */
.ipr-arch__cloud text {
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-bg);
}

/* 장비 라벨 2줄 (줄간격 15) */
.ipr-arch__node text {
  font-size: 11px;
  text-anchor: middle;
}

.ipr-arch__agent text {
  font-size: 12px;
  text-anchor: middle;
}

.ipr-arch__legend text {
  font-size: 12px;
  fill: var(--color-text-sub);
}

.ipr-arch__legend rect {
  fill: var(--color-text);
}

/* 뱃지 안 숫자는 흰색. .ipr-arch__legend text 보다 특이도를 높여 둔다 */
.ipr-arch__legend .ipr-arch__legend-no {
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--color-bg);
}

/* ══ 태블릿 ══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .ipr-hero--en {
    padding-bottom: 64px;
  }

  .ipr-hero--en .ipr-hero__desc {
    max-width: none;
  }

  .ipr-section--last .section__inner {
    padding-bottom: 100px;
  }

  .ipr-benefit__desc {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .ipr-hero--en {
    padding-bottom: 48px;
  }

  .ipr-section--last .section__inner {
    padding-bottom: 64px;
  }

  /* 구성도는 가로로 긴 다이어그램이라 패널 안에서만 가로로 흐르게 한다.
     라벨 레이어도 그림과 같은 폭이어야 한다. reset.css 의 svg{max-width:100%} 를 풀지 않으면
     라벨만 패널 폭으로 눌려 그림과 어긋난다 */
  .ipr-arch__labels {
    width: 860px;
    max-width: none;
  }
}