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

   세로 좌표(아트보드)
     헤더             0 ~   64
     히어로          64 ~  657   (하단 1px #E8ECEF 구분선 657)
     핵심 기능      658 ~ 1222   (#FAFBFC, 하단 1px 구분선 1222)
     주요 특징     1223 ~ 1931
     기대 효과     1932 ~ 2416   (#FAFBFC, 하단 1px 구분선 2416)
     활용 사례     2417 ~ 3001
     시스템 구성도 3002 ~ 3927   (#FAFBFC)
     운영관리 시스템 3928 ~ 4849
     푸터         4850 ~                                               */

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

/* ══ 핵심 기능 표 ════════════════════════════════════════
   국문 라벨(인사관리·성과실적…)보다 영문 라벨이 길어 184px 열에서는
   "Performance KPI/SLA" 가 설명 열(568)과 붙는다. 열만 16px 넓혀
   설명 잉크 시작을 584로 옮긴다. 나머지 좌표는 시안 그대로 */
.argo-func__col--label {
  width: 200px;
}

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

/* 마지막 섹션은 아래 여백이 넓다 (운영관리 다이어그램 하단 4689 → 푸터 4850) */
.argo-section--last .section__inner {
  padding-bottom: 160px;
}

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

/* ══ 다이어그램 라벨 레이어 ═══════════════════════════════
   도형은 시안 SVG(글자 path 만 제거), 라벨은 같은 viewBox 위에 얹은 실제 텍스트.
   기본값은 <svg> 에 걸어 상속시킨다 (text 에 걸면 개별 라벨 클래스를 이긴다) */
.argo-hero__visual,
.argo-diagram {
  position: relative;
}

.argo-hero__visual {
  flex: none;
}

.argo-hero__labels,
.argo-diagram__labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  font-family: var(--font-base);
  fill: var(--color-text);
}

/* ── 히어로 성과 대시보드 목업 ── */
.argo-mock__badge text {
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-bg);
}

.argo-mock__head {
  font-size: 13px;
  font-weight: 600;
  fill: var(--color-bg);
}

/* 카드 라벨·표 머리는 시안에서 패널 배경에 묻히는 어두운 회색이다 (PNG 실측) */
.argo-mock__card text {
  font-size: 12px;
  fill: #656b71;
}

.argo-mock__th text {
  font-size: 10px;
  fill: #78818a;
}

.argo-mock__fc-th text {
  font-size: 10px;
  fill: var(--color-muted);
}

.argo-mock__td text {
  font-size: 10px;
  fill: var(--color-bg);
}

.argo-mock__fc-td text {
  font-size: 10px;
  fill: var(--color-text);
}

/* ── 시스템 구성도 ── */
.argo-arch__colhead text {
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
}

.argo-arch__person text {
  font-size: 13px;
  text-anchor: middle;
}

.argo-arch__web {
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  fill: #12339d;
}

.argo-arch__ext text {
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
  fill: #12339d;
}

.argo-arch__band text {
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-bg);
}

.argo-arch__box text {
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: #12339d;
}

.argo-arch__chip,
.argo-arch__chip text {
  font-size: 14px;
  text-anchor: middle;
  fill: #12339d;
}

.argo-arch__chip-fill,
.argo-arch__chip-fill text {
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-bg);
}

.argo-arch__db {
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  fill: #12339d;
}

/* ── 운영관리 시스템 ── */
.argo-wfm__title text {
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
}

.argo-wfm__axis text {
  font-size: 16px;
  text-anchor: middle;
}

.argo-wfm__chip text {
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  fill: #12339d;
}

/* 마지막 줄(System·Channel·Message)은 칩이 좁아 둘째 줄을 시안처럼 줄인다 */
.argo-wfm__chip .sub--sm {
  font-size: 14px;
  letter-spacing: -0.3px;
}

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

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

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

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

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

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

  .argo-diagram__image,
  .argo-diagram__labels {
    width: 900px;
    max-width: none;
  }
}