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

   세로 좌표(아트보드)
     헤더             0 ~   64
     히어로          64 ~  596   (하단 1px #E8ECEF 구분선 597)
     핵심 기능      598 ~ 1217   (#FAFBFC, 하단 1px 구분선 1218)
     주요 특징     1219 ~ 1927
     기대 효과     1928 ~ 2411   (#FAFBFC)
     활용 사례     2412 ~ 2893
     시스템 구성도 2894 ~ 3838   (#FAFBFC)
     푸터         3839 ~

   국문에 있던 고객사·관련 솔루션 섹션과 히어로 PDF 버튼은 영문 시안에 없다.   */

/* ══ 히어로 ══════════════════════════════════════════════
   본문 5줄(358~502)이 일러스트(160~495)보다 길어 섹션 높이를 결정한다.
   PDF 버튼이 없으므로 본문 박스 하단 502 + 95 = 597 이 곧 섹션 끝이다 */
.rsm-hero--en .rsm-hero__desc {
  word-break: normal;
}

/* ══ 핵심 기능 표 ════════════════════════════════════════
   국문 라벨보다 영문 라벨이 길어 184px 열에서는 "System Resources" 가
   설명 열(568)에 붙는다. 열만 16px 넓혀 설명 잉크 시작을 584 로 옮긴다 */
.rsm-func__col--label {
  width: 200px;
}

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

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

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

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

.rsm-hero__visual {
  flex: none;
}

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

/* ── 히어로 관제 대상 칩 ── */
.rsm-chip text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-anchor: middle;
}

/* ── 시스템 구성도 ── */
.rsm-arch__node text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-anchor: middle;
}

.rsm-arch__bullet text {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.3px;
}

/* ══ 태블릿 ══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* 국문은 .rsm-hero__image 에 걸려 있던 유동 폭을 래퍼로 옮긴다 */
  .rsm-hero__visual {
    width: 100%;
    max-width: 520px;
  }

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

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

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

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

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