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

   세로 좌표(아트보드)
     헤더            0 ~   64
     히어로         64 ~  591   (하단 1px #E8ECEF 구분선 591)
     주요 특징     592 ~ 1253   (#FAFBFC)
     기대 효과    1254 ~ 1850
     활용 사례    1851 ~ 2412   (#FAFBFC)
     시스템 구성도 2413 ~ 3271
     푸터         3272 ~                                             */

/* ══ 히어로 ══════════════════════════════════════════════
   국문에 있던 PDF 버튼이 영문 시안에는 없다. 상하 여백(96/95)은 그대로고,
   일러스트(160~495)가 좌측 컬럼보다 길어 섹션 높이를 결정한다. */
.iweb-hero--en .iweb-hero__desc {
  max-width: 575px;
  word-break: normal;
}

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

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

/* 국문 줄바꿈용 어절 고정을 영문에서는 풀어 카드 폭에 맡긴다 */
.iweb-feature__desc,
.iweb-benefit__desc,
.iweb-case__desc {
  word-break: normal;
}

/* ══ 목업·구성도 라벨 레이어 ═════════════════════════════
   도형은 시안 SVG(글자 path 만 제거), 라벨은 같은 viewBox 위에 얹은 실제 텍스트. */
.iweb-hero__visual,
.iweb-arch {
  position: relative;
}

.iweb-hero__visual {
  flex: none;
}

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

/* 구성도 이미지는 패널 안에서 가운데 정렬(1120)이라 라벨도 같은 자리에 놓는다.
   국문(1040)보다 넓은 것은 "Customer" 라벨이 다이어그램 왼쪽 밖으로 나가기 때문이다 */
.iweb-arch--en .iweb-arch__image,
.iweb-arch__labels {
  width: 1120px;
}

.iweb-arch__labels {
  position: absolute;
  left: 50%;
  top: 38px; /* 테두리 1 + padding 37 */
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
}

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

/* ── 히어로 모바일 목업 ── */
.iweb-mock__pill {
  font-size: 13px;
  fill: var(--color-bg);
}

.iweb-mock__bar {
  font-size: 12px;
  fill: #000;
}

.iweb-mock__bot {
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-bg);
}

.iweb-mock__user {
  font-size: 13px;
  fill: var(--color-text-sub);
}

/* ── 시스템 구성도 ── */
.iweb-arch__phone {
  font-size: 22px;
  font-weight: 700;
  text-anchor: middle;
}

.iweb-arch__group {
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  fill: #12339d;
}

.iweb-arch__bar text {
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-bg);
}

.iweb-arch__actor {
  font-size: 15px;
  text-anchor: middle;
}

.iweb-arch__ch text {
  font-size: 16px;
}

/* ══ 태블릿 ══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .iweb-hero--en .iweb-hero__desc {
    max-width: none;
  }

  /* 국문은 .iweb-hero__image 에 걸려 있던 유동 폭을 래퍼로 옮긴다 */
  .iweb-hero__visual {
    width: 100%;
    max-width: 520px;
  }

  .iweb-hero__image {
    width: 100%;
    height: auto;
  }

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

@media (max-width: 767px) {
  .iweb-section--last .section__inner {
    padding-bottom: 64px;
  }

  /* 구성도는 가로로 긴 다이어그램이라 패널 안에서만 가로로 흐르게 한다.
     라벨 레이어도 그림과 같은 폭이어야 한다 (reset.css 의 svg{max-width:100%} 해제) */
  .iweb-arch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .iweb-arch--en .iweb-arch__image,
  .iweb-arch__labels {
    width: 900px;
    max-width: none;
  }

  /* 모바일은 패널 여백이 20 이라 라벨 레이어 top 도 같이 내린다 */
  .iweb-arch__labels {
    left: 0;
    top: 21px;
    transform: none;
  }
}