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

   세로 좌표(아트보드)
     헤더            0 ~ 64
     히어로          64 ~ 729   (하단 1px #E8ECEF 구분선)
     연동 방식       730 ~ 1213  (#FAFBFC)
     핵심 기능      1214 ~ 1777
     차이           1778 ~ 2337  (#FAFBFC)
     활용 분야      2338 ~ 2899
     기대 효과      2900 ~ 3383  (#FAFBFC)
     도입 안내      3384 ~ 3799
     푸터           3800 ~        */

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

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

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

.tello-hero__title {
  font-size: 60px; /* "Tello Voice" 실측 잉크 300×46 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.tello-hero__subtitle {
  margin-top: 31px; /* 타이틀 잉크 하단 265 → 부제 잉크 307 */
  font-size: 22px; /* 실측 잉크 329×22 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px; /* -0.5 면 잉크폭이 3 좁다 */
  color: var(--color-text);
}

/* 본문 3문단. 줄 잉크 top 353·377·401 / 433·457 / 489·513 → 줄간격 24, 문단 간 8 */
.tello-hero__desc {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.45px; /* 실측 줄 잉크폭 561 / 540 / 551 에 맞춘 값 */
  line-height: 24px;
  color: var(--color-text-sub);
}

.tello-hero__desc + .tello-hero__desc {
  margin-top: 8px;
}

/* 일러스트 : 잉크 bbox 1016~1533 × 208~533. 콘텐츠 우측(1536)에서 2 안쪽 */
.tello-hero__image {
  flex: none;
  margin: 48px 2px 0 0;
}

/* ── 버튼 : 채움 176×54 + gap 16 + 선 121×54, radius 8 ── */
.tello-actions {
  margin-top: 47px;
  display: flex;
  gap: 16px;
}

.tello-actions--center {
  justify-content: center;
}

.tello-btn {
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tello-btn--fill {
  width: 176px;
  background: var(--color-primary);
  color: #ffffff;
}

.tello-btn--fill:hover {
  background: #0f2f9c;
}

.tello-btn--line {
  width: 121px;
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary);
}

.tello-btn--line:hover {
  background: var(--color-icon-bg);
}

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

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

.tello-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);
}

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

/* 표 caption 은 화면에서 감추고 스크린리더에만 남긴다 */
.tello-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══ 연동 방식 ═══════════════════════════════════════════
   카드 368 ×3 + gap 24 = 1152 / 카드 높이 202 / 상단 932 */
.tello-way {
  margin-top: 53px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tello-way__item {
  padding: 24px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.tello-way__icon {
  width: 48px;
  height: 48px;
}

.tello-way__name {
  display: block;
  margin-top: 21px; /* 아이콘 하단 1005 → 이름 잉크 1029 */
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.tello-way__desc {
  margin-top: 13px; /* 이름 잉크 하단 1045 → 본문 잉크 1066 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 24px;
  color: var(--color-text-sub);
}

/* ══ 핵심 기능 표 ════════════════════════════════════════
   상단 경계 1416(#D0D7DE) / 행 55 + 구분선 1 / 짝수 행 배경 #FAFBFC */
.tello-spec {
  width: 100%;
  margin-top: 53px;
  /* 시안은 표 위·아래에 #D0D7DE, 행 사이에 #E8ECEF 두 종류가 있다.
     마지막 행은 구분선(#E8ECEF) 바로 아래에 바깥선(#D0D7DE)이 한 줄 더 있는데,
     border-bottom 으로 주면 border-collapse 가 셀 구분선과 병합해 한 줄이 된다.
     두 줄을 그대로 살리려고 바깥선만 그림자로 그린다 */
  border-top: 1px solid var(--color-line);
  box-shadow: 0 1px 0 var(--color-line);
}

.tello-spec tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.tello-spec th,
.tello-spec td {
  height: 56px; /* 행 피치 56 */
  padding: 0 0 0 16px;
  border-bottom: 1px solid var(--color-card-line);
  text-align: left;
  vertical-align: middle;
  font-size: 18px; /* 잉크폭 역산: 16 × (163÷143) ≈ 18 */
  line-height: 1;
  letter-spacing: -0.5px;
}

/* border-collapse 에서 표 위쪽 테두리 1px 이 첫 행 높이에 얹힌다.
   첫 행만 1 줄여야 다섯 행의 피치가 모두 56 으로 떨어진다 */
.tello-spec tr:first-child th,
.tello-spec tr:first-child td {
  height: 55px;
}

.tello-spec th {
  width: 208px; /* 항목명 x400 → 설명 x608 */
  font-weight: 700;
  color: var(--color-text);
}

.tello-spec td {
  font-weight: 400;
  color: var(--color-text-sub);
}

/* ══ 기존 보이스봇과의 차이 ══════════════════════════════ */
.tello-lead {
  margin-top: 21px; /* 제목 잉크 하단 1924 → 본문 잉크 1953 */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 28px;
  text-align: center;
  color: var(--color-text);
}

/* 열 168 / 480 / 504 (각 padding-left 16 기준 잉크 x400 · 568 · 1048) */
.tello-compare {
  width: 100%;
  margin-top: 49px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  table-layout: fixed;
}

.tello-compare th,
.tello-compare td {
  padding: 0 0 0 16px;
  text-align: left;
  vertical-align: middle;
  letter-spacing: -0.5px;
  line-height: 1;
}

.tello-compare thead th {
  height: 37px;
  border-bottom: 1px solid var(--color-card-line);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.tello-compare thead th:first-child {
  width: 168px;
}

.tello-compare thead th:nth-child(2) {
  width: 480px;
}

.tello-compare tbody th,
.tello-compare tbody td {
  height: 56px; /* 행 피치 56 */
  font-size: 18px; /* 잉크폭 역산: 16 × (178÷157) ≈ 18 */
}

.tello-compare tbody tr:not(:last-child) th,
.tello-compare tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-card-line);
}

/* 1·3행이 흰색, 2행은 섹션 배경(#FAFBFC) 그대로 */
.tello-compare tbody tr:nth-child(odd) {
  background: var(--color-bg);
}

.tello-compare tbody th {
  font-weight: 700;
  color: var(--color-text);
}

.tello-compare tbody td {
  font-weight: 400;
  color: var(--color-text-sub);
}

/* .tello-compare tbody td 보다 선택자 특정도가 높아야 굵기가 먹는다 */
.tello-compare tbody td.tello-compare__own {
  font-weight: 700;
  color: var(--color-primary);
}

/* ══ 활용 분야 ═══════════════════════════════════════════
   카드 564 ×2 + gap 24 / 카드 높이 128 / padding 32 */
.tello-use {
  margin-top: 53px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tello-use__item {
  padding: 32px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

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

.tello-use__desc {
  margin-top: 16px; /* 이름 잉크 하단 2597 → 본문 잉크 2617 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 24px;
  color: var(--color-text-sub);
}

/* ══ 기대 효과 ═══════════════════════════════════════════
   2열 552 + gap 48 / 항목 112 + 구분선 1 = 113 */
.tello-benefit {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}

.tello-benefit__item {
  display: flex;
  align-items: flex-start;
  padding: 28px 0; /* 항목 높이 112 + 구분선 1 = 113 */
  border-bottom: 1px solid var(--color-card-line);
}

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

.tello-benefit__body {
  display: block;
}

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

.tello-benefit__desc {
  display: block;
  margin-top: 18px; /* 제목 잉크 하단 3127 → 설명 잉크 3147 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--color-text);
}

/* ══ 도입 안내 ═══════════════════════════════════════════ */
.tello-cta .section__inner {
  padding-bottom: 160px; /* 버튼 하단 3639 → 푸터 3800 */
}

.tello-cta .tello-actions {
  margin-top: 53px;
}

/* ══ 태블릿 ══════════════════════════════════════════════
   모바일 시안이 없으므로 1단 스택 + 좌우 여백 규칙을 따른다.
   시안 기준으로 고정한 <br> 은 폭이 줄면 어색한 줄을 만들어 해제한다 */
@media (max-width: 1023px) {
  .tello-hero {
    padding: 64px 0;
  }

  .tello-hero__inner {
    flex-direction: column;
    gap: 48px;
  }

  .tello-hero__image {
    width: 100%;
    max-width: 518px;
    height: auto;
    margin: 0;
  }

  .tello-hero__desc br,
  .tello-lead br,
  .tello-way__desc br {
    display: none;
  }

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

  .tello-cta .section__inner {
    padding-bottom: 100px;
  }

  .tello-way {
    margin-top: 40px;
    grid-template-columns: 1fr;
  }

  .tello-spec {
    margin-top: 40px;
  }

  .tello-spec th {
    width: 30%;
  }

  .tello-compare {
    margin-top: 40px;
  }

  /* 3열 합이 1152 로 고정돼 있어 그대로 두면 페이지에 가로 스크롤이 생긴다 */
  .tello-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tello-compare {
    min-width: 720px;
  }

  .tello-compare thead th:first-child,
  .tello-compare thead th:nth-child(2) {
    width: auto;
  }

  .tello-use {
    margin-top: 40px;
  }

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

  .tello-benefit__desc {
    line-height: 24px;
  }
}

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

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

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

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

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

  .tello-actions {
    margin-top: 32px;
    flex-wrap: wrap;
  }

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

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

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

  .tello-cta .tello-actions {
    margin-top: 32px;
  }

  .tello-way__item,
  .tello-use__item {
    padding: 20px;
  }

  .tello-way__name,
  .tello-use__name,
  .tello-benefit__name {
    font-size: 18px;
  }

  .tello-way__desc,
  .tello-use__desc,
  .tello-benefit__desc {
    font-size: 15px;
    line-height: 24px;
  }

  .tello-lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 24px;
  }

  /* 항목명 / 설명을 위아래로 쌓는다 (2열로는 폭이 안 나온다) */
  .tello-spec th,
  .tello-spec td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border-bottom: 0;
    font-size: 15px;
    line-height: 22px;
  }

  .tello-spec th {
    padding-top: 16px;
  }

  .tello-spec td {
    padding: 6px 0 16px;
    border-bottom: 1px solid var(--color-card-line);
  }

  .tello-spec tr:first-child th {
    height: auto;
  }

  .tello-compare thead th {
    font-size: 14px;
  }

  .tello-compare tbody th,
  .tello-compare tbody td {
    height: 48px;
    font-size: 15px;
  }

  .tello-use {
    grid-template-columns: 1fr;
  }

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

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