@import url("/v2/css/page/owms.css");
/* 1020201(영문).css — 비대면 서비스 / OWMS (영문)
   구조·컴포넌트는 국문 OWMS(020301.css)를 그대로 쓰고, 영문 시안과 다른 값만 여기서 덮는다.
   수치는 design/1020201_OWMS(영문).svg(1920×5310) 실측 기준.

   세로 좌표(아트보드)
     헤더             0 ~   64
     히어로          64 ~  590   (하단 1px #E8ECEF 구분선 591, 높이는 목업 160~495 가 결정)
     주요 특징      592 ~ 1527   (#FAFBFC, 카드 7장 = 3행)
     기대 효과     1528 ~ 2011
     서비스 화면   2012 ~ 3595   (#FAFBFC, 패널 2214~3515)
     활용 사례     3596 ~ 4029
     시스템 구성도 4030 ~ 5110   (#FAFBFC, 패널 4232~4950)
     푸터         5111 ~

   국문에 있던 고객사·관련 솔루션 섹션은 영문 시안에 없다.   */

/* ══ 히어로 ══════════════════════════════════════════════
   본문 4줄(358~472)이 목업(160~495)보다 짧아 목업이 섹션 높이를 결정한다 */
.owms-hero--en .owms-hero__desc {
  word-break: normal;
}

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

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

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

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

.owms-hero__visual {
  flex: none;
}

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

/* ── 히어로 화면 목업 ── */
.owms-mock__status {
  font-size: 11px;
  font-weight: 600;
  text-anchor: start;
  fill: var(--color-bg);
}

.owms-mock__bubble text {
  font-size: 15px;
  font-weight: 700;
  fill: var(--color-bg);
}

.owms-mock__bar {
  font-size: 11px;
  text-anchor: start;
  fill: var(--color-bg);
}

.owms-mock__btn {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-bg);
}

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

/* ── 서비스 화면 도식 ── */
.owms-svc__col text {
  font-size: 20px;
  font-weight: 700;
}

.owms-svc__chan text {
  font-size: 17px;
}

.owms-svc__chan .on {
  fill: #12339d;
}

.owms-svc__bar text {
  font-size: 17px;
  font-weight: 700;
  fill: var(--color-bg);
}

.owms-svc__item text {
  font-size: 14px;
}

.owms-svc__item .on {
  fill: #12339d;
}

.owms-svc__cc {
  font-size: 19px;
  font-weight: 700;
  fill: #036636;
}

.owms-svc__ai {
  font-size: 16px;
  font-weight: 700;
  fill: var(--color-bg);
}

/* ── 시스템 구성도 ── */
.owms-arch__cloud text {
  font-size: 16px;
  font-weight: 700;
  fill: var(--color-bg);
}

.owms-arch__node text {
  font-size: 14px;
}

.owms-arch__card text {
  font-size: 15px;
  font-weight: 600;
}

.owms-arch__card-title text {
  font-size: 16px;
  font-weight: 700;
  text-anchor: start;
}

.owms-arch__gov text {
  font-size: 14px;
  font-weight: 600;
  text-anchor: start;
}

.owms-arch__chip text {
  font-size: 14px;
  fill: var(--color-text-sub);
}

.owms-arch__person text {
  font-size: 12px;
}

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

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

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

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

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

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