/* 020103.css — AI(인공지능) / AoE
   수치는 design/020103_AoE.svg 를 브라우저 렌더한 1920×4664 기준 픽셀 실측.
   단일 줄 텍스트는 line-height:1 로 두어 잉크 박스 ≈ 라인 박스가 되게 하고,
   요소 간 여백은 실측 delta 를 그대로 margin 으로 넣는다.

   세로 좌표(아트보드)
     헤더               0 ~   64
     히어로            64 ~  728   (하단 1px #E8ECEF 구분선 729)
     기존 콜봇과의 차이 730 ~ 1631  (#FAFBFC)
     AOE Studio     1632 ~ 2253
     핵심 구성       2254 ~ 2797   (#FAFBFC)
     활용 사례       2798 ~ 3263
     기대 효과       3264 ~ 3908   (#FAFBFC)
     관련 솔루션     3909 ~ 4464
     푸터            4465 ~                                            */

/* ══ 히어로 ══════════════════════════════════════════════
   배지 160 / 일러스트 1017~1536 × 160~495 / 버튼 580~633 / 섹션 끝 728 */
.aoe-hero {
  padding: 96px 0 95px; /* 헤더 64 + 96 = 배지 160 */
  border-bottom: 1px solid var(--color-card-line);
}

.aoe-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-pc);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.aoe-hero__badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px; /* 실측 폭 103 */
  margin-bottom: 22px;
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary);
}

.aoe-hero__title {
  font-size: 60px; /* "AoE" 실측 잉크 108×44 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.aoe-hero__subtitle {
  margin-top: 35px; /* 타이틀 박스 하단 274 → 부제 잉크 310 */
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

/* 본문 6줄이 30px 간격으로 이어진다.
   이 페이지는 문단 사이 추가 여백이 없다(020101·020102 는 8) */
.aoe-hero__desc {
  margin-top: 21px; /* 부제 박스 하단 331 → 본문 잉크 358 */
  max-width: 574px; /* 시안 최대 줄 폭 568 — Chrome 이 같은 줄을 4px 넓게 그려 6 여유를 준다 */
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 30px;
  color: var(--color-text-sub);
}

.aoe-hero__desc + .aoe-hero__desc {
  margin-top: 0;
}

/* 일러스트 : clipPath 프레임 520×336, 배치 1017~1537 × 160~495.
   시안이 콘텐츠 우단(1536)보다 1px 오른쪽에서 끝나므로 그만큼 내보낸다 */
.aoe-hero__image {
  flex: none;
  margin: 0 -1px 0 0;
}

/* ── 버튼 : 선 173×54, radius 8, 텍스트 + 다운로드 아이콘 14, gap 9 ── */
/* PDF 소개서가 없는 동안 버튼을 감춘다.
   준비되면 마크업의 hidden 을 지우면 다시 보인다 */
.aoe-actions[hidden] {
  display: none;
}

.aoe-actions {
  margin-top: 48px; /* 본문 마지막 줄 박스 하단 532 → 버튼 580 */
  display: flex;
  gap: 16px;
}

.aoe-btn {
  width: 173px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
  transition: background-color .2s ease, border-color .2s ease;
}

.aoe-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

/* ══ 섹션 공통 ═══════════════════════════════════════════
   섹션 top → eyebrow 잉크 83 / eyebrow → 제목 잉크 19 / 제목 → 본문 블록 53 */
.aoe-section--alt {
  background: var(--color-bg-alt);
}

.aoe-section .section__inner {
  padding-top: 82px;
  padding-bottom: 80px;
}

.aoe-eyebrow {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-muted);
}

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

/* 제목 아래 한 줄 리드 (제목 박스 하단 879 → 박스 905) */
.aoe-lead {
  margin-top: 26px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.45px; /* 시안 잉크 폭 960 에 맞춘 값 */
  text-align: center;
  color: var(--color-text);
}

/* ══ 기존 콜봇과의 차이 ═══════════════════════════════════
   패널 400 + gap 24 + 728 = 1152 / 두 패널 모두 top 976 */
/* 1152 에서 400 : 728 이 되도록 비율로 잡는다.
   px 로 고정하면 뷰포트 1024~1231 구간에서 가로 스크롤이 생긴다 */
.aoe-compare {
  margin-top: 53px; /* 리드 박스 하단 923 → 패널 976 */
  display: grid;
  grid-template-columns: 400fr 728fr;
  align-items: start; /* 패널 높이가 서로 다르다 (448 / 576) */
  gap: 24px;
}

.aoe-panel {
  padding: 36px 31px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.aoe-panel__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--color-text);
}

/* 스텝 사이 간격은 패널마다 다르지만(42 / 32) 화살표 중심은 둘 다 같은 y 다 */
.aoe-flow__item + .aoe-flow__item::before {
  content: "";
  display: block;
  background: url("/v2/images/icon/aoe-chevron.svg") no-repeat center;
}

.aoe-flow__step {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: var(--color-bg-alt);
}

.aoe-flow__icon {
  flex: none;
  width: 36px;
  height: 36px;
}

/* flex:1 로 남는 폭을 다 쓰게 해야 시안의 텍스트 중심(좌 611 / 우 1204.5)이 맞는다 */
.aoe-flow__text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--color-text);
}

/* ── 콜봇 패널 : 스텝 78 + 간격 42 (박스 1069·1189·1309) ──
   좌우 여백은 시안에서 박스 폭의 15.77% (336 × 0.1577 = 53).
   px 로 고정하면 폭이 줄었을 때 글자 자리가 남지 않는다 */
.aoe-panel--bot .aoe-flow__step {
  min-height: 78px;
  padding: 0 15.77%;
  gap: 19px;
}

.aoe-panel--bot .aoe-flow__item + .aoe-flow__item::before {
  height: 42px;
}

/* 마지막 스텝만 배경이 진하고 글자가 굵다 */
.aoe-flow__step--end {
  background: var(--color-card-line);
}

.aoe-flow__step--end .aoe-flow__text {
  font-weight: 700;
}

/* ── Agent 패널 : 스텝 88 + 간격 32 (박스 1064·1184·1304·1424) ── */
.aoe-panel--agent {
  padding-bottom: 31px; /* 마지막 스텝 1519 → 패널 하단 1550 */
}

.aoe-panel--agent .aoe-panel__title {
  margin-bottom: 29px; /* 제목 박스 하단 1035 → 첫 스텝 1064 */
}

.aoe-panel--bot .aoe-panel__title {
  margin-bottom: 34px; /* 제목 박스 하단 1035 → 첫 스텝 1069 */
}

/* 좌우 여백은 시안에서 박스 폭의 15.36% (664 × 0.1536 = 102) */
.aoe-panel--agent .aoe-flow__step {
  min-height: 88px;
  padding: 0 15.36%;
  gap: 30px;
}

.aoe-panel--agent .aoe-flow__item + .aoe-flow__item::before {
  height: 32px;
}

/* 마지막 결론 스텝 : 2줄이라 96, 배경·글자색이 파랑 계열.
   위 .aoe-panel--agent .aoe-flow__step 규칙보다 우선해야 하므로 같은 깊이로 쓴다 */
.aoe-panel--agent .aoe-flow__step--result {
  min-height: 96px;
  background: var(--color-icon-bg);
}

.aoe-flow__step--result .aoe-flow__text {
  font-weight: 700;
  color: var(--color-primary);
}

/* ══ AOE Studio ══════════════════════════════════════════
   일러스트 1851~2026 / 강조 2071 / 본문 2114~2174 */
.aoe-studio__image {
  margin: 70px auto 0; /* 제목 박스 하단 1781 → 일러스트 1851 */
}

.aoe-statement {
  margin-top: 44px; /* 일러스트 하단 2027 → 강조 박스 2071 */
  font-size: 22px; /* 시안 잉크 653×20 실측 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--color-text);
}

.aoe-em {
  font-weight: 700;
  color: var(--color-primary);
}

.aoe-studio__desc {
  margin-top: 21px; /* 강조 박스 하단 2093 → 본문 박스 2114 */
  font-size: 20px; /* 시안 줄 폭 960 / 528 실측 */
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.45px; /* 시안 줄 폭에 맞춘 값 */
  text-align: center;
  color: var(--color-text);
}

/* ══ 핵심 구성 표 ════════════════════════════════════════
   2456~2717 / 헤더 36 + 본문 4행 × 56 / 컬럼 208
   바깥 테두리는 #D0D7DE, 행 구분선은 #E8ECEF.
   이 시안은 마지막 행 구분선이 없다 (표 아래 테두리만) */
.aoe-table {
  margin-top: 53px; /* 제목 박스 하단 2403 → 표 위 테두리 2456 */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* 표 제목은 화면에서 감춘다 (시안에 없음) */
.aoe-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.aoe-table__col--label {
  width: 208px; /* 모듈 텍스트 400 → 역할 텍스트 608 */
}

.aoe-table th,
.aoe-table td {
  padding: 0 16px; /* 표 좌단 384 → 텍스트 400 */
  border-bottom: 1px solid var(--color-card-line);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.aoe-table thead th {
  height: 36px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--color-text-sub);
}

.aoe-table tbody tr {
  height: 56px;
}

.aoe-table tbody tr:nth-child(odd) {
  background: var(--color-bg); /* 회색 섹션 위에서는 홀수 행이 흰색 */
}

.aoe-table tbody tr:last-child th,
.aoe-table tbody tr:last-child td {
  border-bottom: 0; /* 시안에 마지막 행 구분선이 없다 */
}

.aoe-table tbody th {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

.aoe-table tbody td {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--color-text-sub);
}

/* ══ 활용 사례 ═══════════════════════════════════════════
   카드 368 ×3 + gap 24 = 1152 / 카드 높이 184 (3000~3183) */
.aoe-case {
  margin-top: 53px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 상 36 / 하 30. 시안 실측이 비대칭이다 */
.aoe-case__item {
  padding: 36px 32px 30px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.aoe-case__name {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

/* 카드 안쪽 폭 302 가 그대로 줄바꿈 기준이다.
   시안이 어절 중간에서도 끊으므로(이/력) keep-all 을 주면 안 된다 */
.aoe-case__desc {
  margin-top: 22px; /* 제목 박스 하단 3059 → 본문 박스 3081 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 24px;
  color: var(--color-text-sub);
}

/* ══ 기대 효과 ═══════════════════════════════════════════
   2열 552 + gap 48 / 구분선 3554·3691·3828 */
.aoe-benefit {
  margin-top: 29px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}

.aoe-benefit__item {
  display: flex;
  align-items: flex-start;
  padding: 29px 0 23px;
  border-bottom: 1px solid var(--color-card-line);
}

.aoe-benefit__num {
  flex: none;
  width: 68px; /* 번호 잉크 x386 → 제목 x452 */
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #d1d9f3;
}

.aoe-benefit__body {
  display: block;
}

.aoe-benefit__name {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.aoe-benefit__desc {
  display: block;
  max-width: 465px; /* 시안 최대 줄 폭 456 */
  margin-top: 14px; /* 제목 박스 하단 3493 → 설명 박스 3507 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  word-break: keep-all; /* 시안은 모든 줄이 어절 경계에서 끊긴다 */
  line-height: 24px;
  color: var(--color-text); /* 이 섹션만 본문색이 진하다 */
}

/* ══ 관련 솔루션 ═════════════════════════════════════════
   카드 368 ×3 + gap 24 / 카드 높이 274 (4111~4384) */
.aoe-solution {
  margin-top: 53px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aoe-solution__item {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.aoe-solution__icon {
  display: block;
  width: 48px;
  height: 48px;
}

.aoe-solution__name {
  display: block;
  margin-top: 21px; /* 아이콘 하단 4192 → 제목 잉크 4214 */
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.aoe-solution__desc {
  margin-top: 13px; /* 제목 박스 하단 4235 → 본문 박스 4248 (잉크 4253) */
  word-break: keep-all; /* 시안은 모든 줄이 어절 경계에서 끊긴다 */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 28px;
  color: var(--color-text-sub);
}

/* 링크는 카드 아래에 붙는다 (본문 줄 수가 카드마다 달라도 잉크 4333 고정) */
.aoe-solution__link {
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.aoe-solution__link:hover {
  text-decoration: underline;
}

.aoe-cta .section__inner {
  padding-bottom: 80px; /* 카드 하단 4384 → 푸터 4465 */
}

/* ══ 태블릿 ══════════════════════════════════════════════
   모바일 시안이 없으므로 1단 스택 + 좌우 여백 규칙을 따른다 */
@media (max-width: 1023px) {
  .aoe-hero {
    padding: 64px 0;
  }

  /* 세로로 쌓으면 교차축이 가로가 된다. flex-start 로 두면 본문이
     제 폭(max-content)까지 늘어나 화면 밖으로 나간다 */
  .aoe-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .aoe-hero__image {
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .aoe-hero__desc {
    max-width: none;
  }

  .aoe-section .section__inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .aoe-cta .section__inner {
    padding-bottom: 64px;
  }

  .aoe-lead,
  .aoe-studio__desc {
    line-height: 28px;
  }

  /* 폭이 달라지면 시안 줄바꿈 위치가 의미 없다 */
  .aoe-studio__desc br {
    display: none;
  }

  /* 두 패널을 위아래로 쌓고 좌우 여백은 유동으로 */
  .aoe-compare {
    margin-top: 40px;
    grid-template-columns: 1fr;
  }

  .aoe-panel--bot .aoe-flow__step,
  .aoe-panel--agent .aoe-flow__step,
  .aoe-panel--agent .aoe-flow__step--result {
    min-height: 78px;
    padding: 16px 24px;
    gap: 20px;
  }

  .aoe-case,
  .aoe-solution {
    margin-top: 40px;
    grid-template-columns: repeat(2, 1fr);
  }

  .aoe-benefit {
    margin-top: 24px;
    grid-template-columns: 1fr;
  }

  .aoe-benefit__desc {
    max-width: none;
  }

  /* 2열이 좁아지면 제목이 낱글자로 끊긴다. 어절 단위로만 넘긴다 */
  .aoe-case__name,
  .aoe-benefit__name,
  .aoe-solution__name {
    word-break: keep-all;
  }

  /* 표는 폭을 줄이면 글자가 깨진다. 최소 폭을 두고 가로로만 흐르게 한다 */
  .aoe-table {
    display: block;
    margin-top: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ══ 모바일 ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .aoe-hero {
    padding: 48px 0;
  }

  /* .section__inner 와 좌우 여백을 맞춘다 */
  .aoe-hero__inner {
    padding: 0 var(--gutter-mo);
  }

  .aoe-hero__title {
    font-size: 36px;
  }

  .aoe-hero__subtitle {
    margin-top: 20px;
    font-size: 18px;
  }

  .aoe-hero__desc {
    margin-top: 18px;
    font-size: 15px;
    line-height: 26px;
  }

  .aoe-actions {
    margin-top: 32px;
  }

  .aoe-title {
    margin-top: 14px;
    font-size: 24px;
  }

  .aoe-lead,
  .aoe-studio__desc {
    font-size: 15px;
    line-height: 24px;
    text-align: left;
  }

  .aoe-statement {
    font-size: 17px;
    line-height: 26px;
  }

  .aoe-studio__image {
    margin-top: 40px;
  }

  .aoe-section .section__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .aoe-cta .section__inner {
    padding-bottom: 48px;
  }

  .aoe-panel {
    padding: 24px 20px;
  }

  .aoe-panel--bot .aoe-flow__step,
  .aoe-panel--agent .aoe-flow__step,
  .aoe-panel--agent .aoe-flow__step--result {
    min-height: 0;
    padding: 14px 16px;
    gap: 14px;
  }

  .aoe-flow__text {
    font-size: 15px;
    line-height: 22px;
    text-align: left;
  }

  .aoe-case,
  .aoe-solution {
    grid-template-columns: 1fr;
  }

  .aoe-case__item {
    padding: 20px;
  }

  .aoe-solution__item {
    padding: 20px;
  }

  .aoe-case__name,
  .aoe-benefit__name,
  .aoe-solution__name {
    font-size: 18px;
  }

  .aoe-case__desc,
  .aoe-benefit__desc,
  .aoe-solution__desc {
    font-size: 15px;
    line-height: 24px;
  }

  .aoe-benefit__item {
    padding: 20px 0;
  }

  .aoe-benefit__num {
    width: 52px;
    font-size: 32px;
  }
}