/* 01.css — 메인
   수치는 design/01_메인.svg(1920×3875) 실측 기준.
   헤더·푸터는 common.css 를 그대로 쓴다.
   섹션 경계 : 히어로 64~735 / 여정 735~2118 / 레퍼런스 2118~3126 / 누적콜 3126~3676 */

/* 인라인 아이콘은 시안 좌표계 viewBox 를 그대로 쓴다.
   viewBox 밖 좌표가 문서 폭을 넓히지 않도록 잘라 둔다 */
.role__icon svg,
.prod__ext,
.journey-nav__btn svg {
  overflow: hidden;
}

/* ── 섹션 머리 : 050301·050302 와 동일 리듬 ── */
.eyebrow {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-muted);
}

.section-title {
  margin-top: 17px;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.section-desc {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.25px;
  color: var(--color-text-sub);
}

/* ── 히어로 : 64~735 (671) ─────────────────────────────── */
.main-hero {
  position: relative;
  height: 671px;
  background: var(--color-bg);
  overflow: hidden;
}

/* 입자 배경 : 시안은 1920×1076 로 늘린 이미지를 y31 에 180° 회전해 20% 로 얹는다 */
.main-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: -33px;
  width: 100%;
  height: 1076px;
  background: url("/v2/images/main-hero-bg.png") no-repeat center / 100% 100%;
  transform: rotate(180deg);
  opacity: 0.2;
  pointer-events: none;
}

.main-hero__inner {
  position: relative;
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 120px var(--gutter-pc) 0; /* 히어로 상단 64 → 배지 184 */
}

/* 배지 223×38 rx19 */
.main-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 17px;
  border: 1px solid rgba(232, 236, 239, 0.3);
  border-radius: 19px;
  background: rgba(20, 53, 77, 0.04);
  font-size: 15.5px;
  line-height: 1;
  color: var(--color-text);
}

.main-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #2fe2c4;
}

/* 배지 끝 222 → 제목 잉크 263 */
.main-hero__title {
  margin-top: 32px;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.main-hero__title em {
  display: block;
  font-style: normal;
  color: var(--color-primary);
}

.main-hero__desc {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--color-text-sub);
}

/* 카드 192 × 3, x384/592/800 → gap 16 */
.main-hero__cards {
  display: flex;
  gap: 16px;
  margin-top: 35px;
}

.hero-card {
  width: 192px;
}

.hero-card a {
  display: block;
  padding: 17px;
  border: 1px solid var(--color-card-line);
  border-radius: 16px;
  background: var(--color-bg);
}

.hero-card__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--color-bg);
}

.hero-card__badge--new {
  height: 29px;
  background: #047d42;
}

.hero-card__badge--saas {
  background: var(--color-primary);
}

.hero-card__badge--ent {
  background: var(--color-text-sub);
}

.hero-card__title {
  display: block;
  margin-top: 19px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.hero-card__sub {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-sub);
}

/* 우측 비주얼 : 채팅창.
   absolute 로 얹어 좌측(배지·타이틀·카드) 좌표에 전혀 영향을 주지 않는다.
   시안 좌표 1088~1536 × 175~609 → 컨테이너 우측 정렬, top 111 (히어로 상단 64 + 111 = 175) */
.hero-visual {
  position: absolute;
  top: 111px;
  right: var(--gutter-pc);
  width: 448px;
  height: 434px;
  pointer-events: none;
}

.hero-visual__chat {
  display: block;
  width: 100%;
  height: auto;
}

/* 말풍선 : 시안 좌표(카드 1088,143 기준)를 카드 폭 448 / 높이 434 비율로 환산.
   좌우 여백 24 → 5.357% / top 76.5·130.5·194.5·250.5·314.5·370.5
   시안은 아래쪽 말풍선이 흐리지만, 하나씩 나타나며 읽혀야 하므로 전부 진하게 둔다 */
.hero-chat__msg {
  position: absolute;
  max-width: 84%;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 18px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  opacity: 0;
  animation: 13.5s ease-out infinite both;
}

.hero-chat__msg--ask {
  left: 5.357%;
  background: #fafbfc;
  color: #57606a;
}

.hero-chat__msg--ans {
  right: 5.357%;
  background: #e3edff;
  color: var(--color-primary);
}

.hero-chat__msg:nth-of-type(1) { top: 17.63%; animation-name: heroChat1; }
.hero-chat__msg:nth-of-type(2) { top: 30.07%; animation-name: heroChat2; }
.hero-chat__msg:nth-of-type(3) { top: 44.82%; animation-name: heroChat3; }
.hero-chat__msg:nth-of-type(4) { top: 57.72%; animation-name: heroChat4; }
.hero-chat__msg:nth-of-type(5) { top: 72.47%; animation-name: heroChat5; }
.hero-chat__msg:nth-of-type(6) { top: 85.37%; animation-name: heroChat6; }

/* 13.5초 한 바퀴 : 1.8초 간격으로 하나씩 뜨고,
   다음 글이 뜨는 순간부터 앞의 글이 0.9초에 걸쳐 서서히 사라진다 */
@keyframes heroChat1 {
  0%, 4.44% { opacity: 0; transform: translateY(8px); }
  7.04%, 17.78% { opacity: 1; transform: none; }
  24.44%, 100% { opacity: 0; transform: none; }
}

@keyframes heroChat2 {
  0%, 17.78% { opacity: 0; transform: translateY(8px); }
  20.37%, 31.11% { opacity: 1; transform: none; }
  37.78%, 100% { opacity: 0; transform: none; }
}

@keyframes heroChat3 {
  0%, 31.11% { opacity: 0; transform: translateY(8px); }
  33.7%, 44.44% { opacity: 1; transform: none; }
  51.11%, 100% { opacity: 0; transform: none; }
}

@keyframes heroChat4 {
  0%, 44.44% { opacity: 0; transform: translateY(8px); }
  47.04%, 57.78% { opacity: 1; transform: none; }
  64.44%, 100% { opacity: 0; transform: none; }
}

@keyframes heroChat5 {
  0%, 57.78% { opacity: 0; transform: translateY(8px); }
  60.37%, 71.11% { opacity: 1; transform: none; }
  77.78%, 100% { opacity: 0; transform: none; }
}

@keyframes heroChat6 {
  0%, 71.11% { opacity: 0; transform: translateY(8px); }
  73.7%, 88.89% { opacity: 1; transform: none; }
  95.56%, 100% { opacity: 0; transform: none; }
}

/* 파형 : 시안 좌표 1191~1433 × 334~435 → 카드(1088,143) 기준 103,191 */
.hero-wave {
  position: absolute;
  left: 23%;   /* 103 / 448 */
  top: 44%;    /* 191 / 434 */
  width: 54%;  /* 242 / 448 */
  height: auto;
  overflow: visible;
}

/* 막대는 세로 중심(384.5)을 기준으로 늘었다 줄었다 한다.
   fill-box 로 두면 각 막대 자기 중심이 기준이 된다 */
.hero-wave__bars path {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroWave ease-in-out infinite;
}

@keyframes heroWave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

/* 막대마다 주기·시작을 어긋나게 해서 파형처럼 보이게 한다 */
.hero-wave__bars path:nth-child(1) { animation-duration: 1s; animation-delay: 0s; }
.hero-wave__bars path:nth-child(2) { animation-duration: 1.3s; animation-delay: .12s; }
.hero-wave__bars path:nth-child(3) { animation-duration: 1.1s; animation-delay: .24s; }
.hero-wave__bars path:nth-child(4) { animation-duration: 1.4s; animation-delay: .06s; }
.hero-wave__bars path:nth-child(5) { animation-duration: .9s; animation-delay: .18s; }
.hero-wave__bars path:nth-child(6) { animation-duration: 1.2s; animation-delay: .3s; }
.hero-wave__bars path:nth-child(7) { animation-duration: 1.5s; animation-delay: 0s; }
.hero-wave__bars path:nth-child(8) { animation-duration: 1.2s; animation-delay: .15s; }
.hero-wave__bars path:nth-child(9) { animation-duration: .9s; animation-delay: .27s; }
.hero-wave__bars path:nth-child(10) { animation-duration: 1.4s; animation-delay: .09s; }

/* ── 제품 여정 : 735~2118 ──────────────────────────────── */
.journey__inner,
.refs__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px var(--gutter-pc) 96px;
}

/* 역할 탭 : 전화 여정 4 + 지켜보는 눈 3, 그룹 간 21 / 탭 간 9 */
.roles {
  display: flex;
  gap: 21px;
  margin-top: 52px;
}

.roles__group--journey { flex: 4; }
.roles__group--watch { flex: 3; }

.roles__label {
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-muted);
}

.roles__list {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}

.roles__list li {
  flex: 1;
}

.role {
  width: 100%;
  height: 76px;
  /*padding-top: 13px;*/
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text-sub);
}

.role--on {
  border-color: var(--color-primary);
  background: rgba(39, 90, 255, 0.1);
  color: var(--color-primary);
}

.role__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.role__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.role__name {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.role--on .role__name {
  font-weight: 700;
}

/* 진행 바 1152×8 rx4 : 탭 끝 1192 → 1216 */
.journey-progress {
  height: 8px;
  margin-top: 24px;
  border-radius: 4px;
  background: var(--color-card-line);
}

.journey-progress__fill {
  display: block;
  width: 160px; /* 시안 1단계 실측 */
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
}

/* 단계 패널 1152×356 rx12 : 진행바 끝 1224 → 1248 */
.step {
  height: 356px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
  animation: step-in .35s ease;
}

@keyframes step-in {
  from {
    opacity: .35;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
}

.step__count,
.step__kind {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
}

.step__count {
  background: var(--color-card-line);
  color: var(--color-text-sub);
}

.step__kind {
  background: var(--color-icon-bg);
  color: var(--color-primary);
}

/* 모니터링 단계 칩 (참고 파일 --mon / --mon-soft) */
.step__kind--watch {
  background: #f0eff6;
  color: #5f5a7a;
}

.step__flow {
  color: var(--color-muted);
}

/* 칩 끝 1303 → 제목 잉크 1325 */
.step__title {
  margin-top: 21px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

/* 첫 행 칩 1367 : 제목 박스 끝 1346 → 21 */
.step__rows {
  margin-top: 21px;
}

.step__row {
  display: flex;
  gap: 12px;
}

.step__row + .step__row {
  margin-top: 16px;
}

.step__row dt {
  flex: none;
  width: 96px;
  height: 30px;
  border-radius: 4px;
  background: var(--color-card-line);
  font-size: 11.5px;
  line-height: 30px;
  text-align: center;
  color: var(--color-text-sub);
}

.step__row:first-child dt {
  background: var(--color-icon-bg);
  color: var(--color-primary);
}

.step__row dd {
  padding-top: 2px;
  font-size: 13.5px;
  line-height: 22px;
  color: var(--color-text);
}

/* 구분선 → 담당 제품 */
.step__products-label {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-card-line);
  font-size: 13.5px;
  line-height: 1;
  color: var(--color-muted);
}

/* 좁은 폭에서 칩이 찌그러지는 대신 다음 줄로 내려가게 한다.
   wrap 이 없으면 flex 항목이 최소 콘텐츠 폭까지 줄어들고,
   한글은 글자 단위로 끊을 수 있어 "통합운 / 영관리" 처럼 쪼개진다 */
.step__products {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 21px;
}

.prod {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px; /* 줄바꿈이 생겨도 칩이 찌그러지지 않게 height 대신 min-height */
  padding: 0 16px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 15px;
  line-height: 1;
  word-break: keep-all; /* 한글이 글자 중간에서 끊기지 않게 */
  color: var(--color-text-sub);
}

.prod strong {
  font-weight: 700;
  color: var(--color-text);
}

.prod__ext {
  width: 16px;
  height: 16px;
  color: var(--color-muted);
}

/* 이전/다음 + 점 : 패널 끝 1604 → 1628 */
.journey-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.journey-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-sub);
}

.journey-nav__btn svg {
  width: 16px;
  height: 16px;
}

.journey-dots {
  display: flex;
  gap: 8px;
}

.journey-dots__btn {
  display: block;
  width: 48px;
  height: 24px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.journey-dots__btn--on {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* 제품 분류 : 4열, 카드 x385~622 / 637~1006 / 1021~1259 / 1273~1535 */
/* 1152 기준 239/370/239/263 + gap 13. fr 로 두면 폭이 줄어도 비율이 유지된다 */
.lineup {
  display: grid;
  grid-template-columns: 318fr 318fr 240fr 240fr;
  gap: 12px;
  margin-top: 40px;
}

.lineup__col {
  min-width: 0;
}

.lineup-card {
  padding: 29px 24px 24px;
  border-radius: 16px;
  background: var(--color-bg-alt);
}

.lineup-card + .lineup-card {
  margin-top: 12px;
}

/* 카드 세로 981~1240. 통신 열만 비대면 124 + gap 12 + 통신 124 로 나뉜다 */
.lineup__col--ai .lineup-card,
.lineup__col--cc .lineup-card,
.lineup__col--cloud .lineup-card {
  height: 260px;
}

.lineup__col--net .lineup-card {
  height: 124px;
}

.lineup-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
}

.lineup-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.lineup-card__dot--ai { background: #4c8dff; }
.lineup-card__dot--cc { background: #a78bfa; }
.lineup-card__dot--cloud { background: #2fe2c4; }
.lineup-card__dot--untact { background: #fbbf24; }
.lineup-card__dot--net { background: #8c959f; }

/* 줄 구성은 시안대로 마크업(li = 한 줄)에서 고정한다.
   자동 줄바꿈에 맡기면 시안과 다른 지점에서 끊긴다 */
.lineup-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 21px;
}

.lineup-card__row {
  display: flex;
  gap: 8px 9px;
}

/* 시안에서 칩은 줄 폭을 나눠 채우고 글자는 가운데 온다.
   min-width:0 은 한 줄에 다 안 들어가는 경우(보이는 ARS…) 여백을 줄여 흡수시킨다 */
.lineup-card__list a {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-card-line);
  border-radius: 19px;
  background: var(--color-bg);
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);
}

/* ── 레퍼런스 : 2118~3126 (#FAFAFA) ────────────────────── */
.refs {
  background: #fafafa;
}

/* 필터 칩 : 높이 40, 간격 8 */
.refs__filter {
  display: flex;
  gap: 8px;
  margin-top: 47px;
}

.refs__tab {
  height: 40px;
  padding: 0 23px;
  border: 1px solid var(--color-card-line);
  border-radius: 20px;
  background: var(--color-bg);
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-sub);
}

.refs__tab--on {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

/* 대표 카드 1152×244 rx16 : 칩 끝 2430 → 2454 */
.ref-feature {
  height: 244px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 24px;
  padding: 41px 33px;
  border: 1px solid var(--color-card-line);
  border-radius: 16px;
  background: var(--color-bg);
}

.ref-feature__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.ref-feature__desc {
  margin-top: 25px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-sub);
}

.ref-feature__list {
  margin-top: 22px;
}

.ref-feature__list li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 30px;
  color: var(--color-text);
}

.ref-feature__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  background: url("/v2/images/icon/main-check.svg") no-repeat center / 14px 14px;
}

.ref-feature__image {
  flex: none;
  width: 298px;
  height: 178px;
  border-radius: 4px;
  object-fit: cover;
}

/* 사례 카드 368 × 3, gap 24 : 대표카드 끝 2698 → 2722 */
.ref-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.ref-case {
  min-height: 308px;
  padding: 32px;
  border: 1px solid var(--color-card-line);
  border-radius: 16px;
  background: var(--color-bg);
}

.ref-case__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text);
}

.ref-case__tag--fin { background: var(--color-icon-bg); }
.ref-case__tag--pub { background: #e6f5ee; }
.ref-case__tag--ret { background: var(--color-bg-alt); }

.ref-case__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
}

.ref-case__tag--fin .ref-case__dot { background: var(--color-primary); }
.ref-case__tag--pub .ref-case__dot { background: #047d42; }
.ref-case__tag--ret .ref-case__dot { background: var(--color-muted); }

/* 실데이터 제목은 두 줄이 되는 것이 있다. 어절 중간에서 끊기지 않게 한다 */
.ref-case__title {
  display: block;
  margin-top: 22px;
  word-break: keep-all;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.ref-case__rows {
  margin-top: 25px;
}

.ref-case__rows div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 30px;
}

.ref-case__rows div + div {
  margin-top: 8px;
}

.ref-case__rows dt {
  flex: none;
  width: 72px;
  height: 30px;
  border-radius: 4px;
  background: var(--color-card-line);
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  color: var(--color-text-sub);
}

.ref-case__rows dd {
  padding-top: 8px;
  word-break: keep-all;
  font-size: 13.5px;
  line-height: 15px;
  color: var(--color-text);
}

/* ── 누적 콜 : 3126~3676 (550) ─────────────────────────── */
.stats {
  position: relative;
  height: 470px;
  background: linear-gradient(180deg, #1740c4 0%, #123099 100%);
  text-align: center;
}

.stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 86px var(--gutter-pc) 0; /* 섹션 상단 3126 → 제목 잉크 3252 */
}

.stats__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-bg);
}

.stats__number {
  /* 시안의 안내 문구(제목 아래 19 + 19.5)를 걷어냈다.
     숫자·캡션은 시안 y 좌표를 유지해야 하므로 그만큼을 여기서 흡수한다 (54 + 38.5) */
  margin-top: 67.5px;
  font-size: 111px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--color-bg);
}

.odo__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}

.odo__strip {
  display: block;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.odo__strip span {
  display: block;
  height: 1em;
}

.stats__caption {
  margin-top: 67px;
  font-size: 21.5px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* ── 반응형 : 모바일 시안이 없으므로 CLAUDE.md §4 규칙을 따른다 ── */
@media (max-width: 1023px) {
  .main-hero {
    height: auto;
  }

  .main-hero__inner {
    padding: 80px var(--gutter-mo) 80px;
  }

  .main-hero__title {
    font-size: 44px;
    line-height: 58px;
  }

  .main-hero__desc {
    font-size: 20px;
  }

  .main-hero__cards {
    flex-wrap: wrap;
  }

  /* 우측 비주얼은 카드 아래로 흘린다.
     relative 를 유지해야 그 안의 파형(absolute)이 카드를 기준으로 붙는다 */
  .hero-visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 448px;
    height: auto;
    margin-top: 40px;
  }

  .journey__inner,
  .refs__inner {
    padding: 72px var(--gutter-mo);
  }

  .roles {
    flex-direction: column;
    gap: 24px;
  }

  /* 고정 높이 356 은 PC 전용. 폭이 줄면 내용이 넘친다 */
  .step {
    height: auto;
  }

  /* 점 11개(48×11+80=608)가 이전/다음과 함께 들어가지 않는다 */
  .journey-dots__btn {
    width: 24px;
  }

  .lineup {
    grid-template-columns: repeat(2, 1fr);
  }

  .lineup__col--ai .lineup-card,
  .lineup__col--cc .lineup-card,
  .lineup__col--cloud .lineup-card,
  .lineup__col--net .lineup-card {
    height: auto;
  }

  /* 좁아지면 시안 줄 구성을 유지할 수 없으므로 줄 안에서 다시 흘린다 */
  .lineup-card__row {
    flex-wrap: wrap;
  }

  .ref-feature {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ref-feature__image {
    width: 100%;
    height: auto;
  }

  .ref-cases {
    grid-template-columns: 1fr;
  }

  .ref-case {
    height: auto;
  }

  .stats {
    height: auto;
  }

  .stats__inner {
    padding: 80px var(--gutter-mo);
  }

  .stats__title {
    font-size: 24px;
    line-height: 34px;
  }

  .stats__number {
    font-size: 72px;
  }
}

@media (max-width: 767px) {
  /* 카드가 320 으로 줄어드는 구간. 말풍선도 같이 줄여야 밖으로 나가지 않는다 */
  .hero-chat__msg {
    font-size: 12px;
    padding: 9px 13px;
  }

  .main-hero__title {
    font-size: 34px;
    line-height: 46px;
  }

  .main-hero__desc {
    font-size: 17px;
  }

  .hero-card {
    width: 100%;
  }

  .section-title {
    font-size: 26px;
    line-height: 36px;
  }

  .section-desc {
    font-size: 16px;
    line-height: 26px;
  }

  .refs__filter {
    flex-wrap: wrap;
  }

  .roles__list {
    flex-wrap: wrap;
  }

  .roles__list li {
    flex: 1 1 calc(50% - 5px);
  }

  .step {
    padding: 20px;
  }

  .step__row {
    flex-direction: column;
    gap: 8px;
  }

  .step__row dt {
    width: 96px;
  }

  .journey-dots {
    display: none;
  }

  .lineup {
    grid-template-columns: 1fr;
  }

  .lineup-card__list a {
    white-space: normal;
  }

  .stats__number {
    font-size: 38px;
    letter-spacing: -1px;
  }
}