/* ==========================================================
   AI 직원 (ai-staff.html) — 이 페이지에만 있는 모양
   - 맨 위 메뉴 · 페이지 머리 · 섹션 머리 · FAQ · 상담 띠 · 하단은 css/solution.css 를 함께 씁니다.
   - 색은 solution.css 1번 구역의 값(--g-road 등)을 그대로 씁니다.
   - "@media (max-width: 860px)" = 화면 폭 860px 이하(태블릿 · 휴대폰)일 때만 적용
   목차
     1. 페이지 머리의 "시범 업체 모집" 띠
     2. 이런 순간이 있다면 (카드 3개)
     3. AI 직원 네 역할 · 같은 기록 안내 · GIL 운영팀(A~E)
     4. 일하는 순서 (6단계)
     5. 사람에게 넘기는 기준 · 월간 보고서 예시
     6. 나눠 맡는 일 (3칸)
     7. 시작하는 방법 · 비용
     8. 화면 폭별 조정
   ========================================================== */

/* ========== 1. 페이지 머리의 "시범 업체 모집" 띠 ========== */
.g-page-head .ai-pilot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--g-road);
  border-radius: 999px;
  font-size: 16px;
  color: var(--g-ink);
  max-width: none;
}

.ai-pilot b {
  background: var(--g-road);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ========== 2. 이런 순간이 있다면 (카드 3개) ========== */
.ai-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ai-card {
  border-top: 2px solid var(--g-ink);
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-card b {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--g-ink);
}

.ai-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--g-ink-2);
}

/* ========== 3. AI 직원 네 역할 ========== */
/* 카드 4개를 한 줄에, 지금 시작하는 접수 담당(.on)만 초록 테두리 */
.ai-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ai-roles-internal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-role {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-role.on {
  border: 2px solid var(--g-road);
  padding: 27px 23px 25px;
}

.ai-role-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 카드 · 단계 번호 (01 · 1 …) */
.ai-no {
  font-family: var(--g-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--g-road);
}

/* 상태 표시: 시범 업체 모집(초록) · 준비 중(회색) */
.ai-tag {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-road);
  color: #fff;
  white-space: nowrap;
}

.ai-tag.soon {
  background: var(--g-stone);
  color: var(--g-ink-3);
  border: 1px solid var(--g-line);
}

.ai-role > b {
  font-size: 21px;
  font-weight: 700;
  color: var(--g-ink);
}

.ai-role > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
  flex: 1;
}

.ai-role dl {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--g-line);
}

.ai-role dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-road);
  margin-bottom: 4px;
}

.ai-role dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--g-ink-2);
}

.ai-note {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--g-ink-3);
}

/* "한 팀이 같은 기록을 봅니다" 안내 줄 */
.ai-memo {
  margin: 24px 0 0;
  padding: 18px 22px;
  background: var(--g-road-soft);
  border-left: 3px solid var(--g-road);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

.ai-memo b {
  display: block;
  margin-bottom: 4px;
  color: var(--g-road);
  font-size: 16px;
}

/* GIL 운영팀 다섯 역할 (A~E): 한 줄에 다섯 칸, 칸 사이는 1px 선 */
.ai-ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--g-line);
  border: 1px solid var(--g-line);
}

.ai-op {
  background: var(--g-paper);
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-op .ai-no {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--g-ink);
  color: #fff;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.ai-op b {
  font-size: 19px;
  font-weight: 700;
}

.ai-op p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

/* ========== 4. 일하는 순서 (6단계) ========== */
/* 3칸 × 2줄, 칸 사이는 1px 선 */
.ai-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--g-line);
  border: 1px solid var(--g-line);
}

.ai-step {
  background: var(--g-paper);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-step .ai-no {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--g-road-soft);
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.ai-step b {
  font-size: 19px;
  font-weight: 700;
  color: var(--g-ink);
}

.ai-step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

/* ========== 5. 사람에게 넘기는 기준 · 월간 보고서 예시 ========== */
.ai-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* 넘기는 기준 목록 (왼쪽, 화살표 표시) */
.ai-check {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-check li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--g-line);
  font-size: 17px;
  color: var(--g-ink);
}

.ai-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-road) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8M12 7.5l3.5 3.5-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* 월간 보고서 예시 (오른쪽, 종이 한 장 모양) */
.ai-report {
  margin: 0;
}

.ai-report-in {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  box-shadow: 0 18px 40px -24px rgba(22, 22, 22, .25);
  padding: 28px 28px 24px;
}

.ai-report-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--g-ink);
}

.ai-report-top b {
  font-size: 19px;
}

.ai-report-top span {
  font-size: 13px;
  color: var(--g-ink-3);
}

.ai-report-nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--g-line);
  border: 1px solid var(--g-line);
}

.ai-report-nums div {
  background: var(--g-paper);
  padding: 14px 16px;
}

.ai-report-nums dt {
  font-size: 13px;
  color: var(--g-ink-3);
}

/* 숫자 칸 이름 아래 작은 비교 글 (도입 전 · 평균 처리 시간) */
.ai-report-nums dt span {
  display: block;
  font-size: 12px;
  color: var(--g-road);
}

.ai-report-nums dd {
  margin: 4px 0 0;
  font-family: var(--g-en);
  font-size: 30px;
  font-weight: 500;
  color: var(--g-road);
}

.ai-report-nums small {
  font-family: var(--g-ko);
  font-size: 15px;
  margin-left: 2px;
  color: var(--g-ink-2);
}

.ai-report-list b {
  font-size: 14px;
}

.ai-report-list ol {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--g-ink-2);
}

.ai-report-next {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--g-road-soft);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--g-ink);
}

.ai-report-next b {
  display: block;
  color: var(--g-road);
  margin-bottom: 2px;
}

.ai-report figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--g-ink-3);
}

/* ========== 6. 나눠 맡는 일 (3칸) ========== */
.ai-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ai-col {
  border: 1px solid var(--g-line);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 가운데 GIL 칸만 초록 바탕 */
.ai-col.main {
  background: var(--g-road);
  border-color: var(--g-road);
  color: #fff;
}

.ai-col-en {
  font-family: var(--g-en);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-road);
}

.ai-col.main .ai-col-en {
  color: #bfe3d1;
}

.ai-col > b {
  font-size: 21px;
  font-weight: 700;
}

.ai-col ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--g-ink-2);
}

.ai-col.main ul {
  color: #e6f0eb;
}

.ai-col li + li {
  margin-top: 6px;
}

/* ========== 7. 시작하는 방법 · 비용 ========== */
.ai-start {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.ai-st {
  border-top: 2px solid var(--g-road);
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-st b {
  font-size: 19px;
  font-weight: 700;
}

.ai-st p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

/* 비용 안내 상자 */
.ai-price {
  margin-top: 44px;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px;
  align-items: center;
}

.ai-price b {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
}

.ai-price p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

.ai-price p + p {
  margin-top: 6px;
}

.ai-price p span {
  display: inline-block;
  min-width: 140px;
  font-weight: 600;
  color: var(--g-ink);
}

.ai-price .ai-price-note {
  padding-left: 28px;
  border-left: 1px solid var(--g-line);
  font-size: 15px;
}

/* ========== 8. 화면 폭별 조정 ========== */
/* 화면 폭 1100px 이하일 때 (작은 노트북 · 태블릿): 역할 · 시작 단계 2칸 */
@media (max-width: 1100px) {
  .ai-roles,
  .ai-start {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 운영팀 다섯 칸은 빈칸이 생기지 않게 한 줄을 유지하고 안쪽 여백만 줄임 */
  .ai-op {
    padding: 22px 16px 24px;
  }

  .ai-start {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰): 모두 한 줄에 하나 */
@media (max-width: 860px) {
  .ai-why,
  .ai-roles,
  .ai-ops,
  .ai-flow,
  .ai-two,
  .ai-split,
  .ai-start,
  .ai-price {
    grid-template-columns: 1fr;
  }

  .ai-two {
    gap: 32px;
  }

  .ai-step {
    padding: 24px 22px 26px;
  }

  .ai-price {
    padding: 24px 22px;
    gap: 18px;
  }

  .ai-price .ai-price-note {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--g-line);
  }

  .ai-price p span {
    display: block;
    min-width: 0;
  }

  .g-page-head .ai-pilot {
    align-items: flex-start;
    border-radius: 16px;
    flex-direction: column;
    padding: 12px 16px;
  }
}