/* =========================================================
   ADPs AI 연결 소개 (PILLDOC-3161)
   Views/AiIntro/Index.cshtml

   ADPs 사이트 색을 따릅니다 — 강조 코랄 #f37268, 보조 청록 #39c0c7, 어두운 남색 #343c45.
   기준 폭(961px)은 common.css 의 반응형 경계와 같습니다. 움직임은 두지 않습니다(영상이 이미 움직입니다).
   ========================================================= */

.aic { color: #343c45; }
.aic p { margin: 0; }
.aic ul,
.aic ol { margin: 0; padding: 0; list-style: none; }
.aic figure { margin: 0; }
.aic h2,
.aic h3 { margin: 0; word-break: keep-all; }

.aic-eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: #f37268;
}

/* ---------- 히어로 — 스플릿 레이아웃(글 | 세로 영상) ---------- */
.aic-hero { padding: 80px 0 100px; }
.aic-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 72px;
}
.aic-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aic-hero__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #222;
}
.aic-hero__desc {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.7;
  color: #555;
  word-break: keep-all;
}
.aic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.aic-btn {
  height: 52px;
  padding: 0 26px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 50px;
}
.aic-note {
  font-size: 14px;
  line-height: 1.6;
  color: #888;
  word-break: keep-all;
}

/* ---------- 영상 — 쇼츠는 9:16 틀에 넣어 위아래 검은 띠가 생기지 않게 합니다 ---------- */
.aic-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  background: #222;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.aic-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.aic-video__caption {
  margin-top: 12px;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* ---------- 공통 섹션·머리 ---------- */
.aic-section { padding: 100px 0; border-top: 1px solid #e7e7e7; }
.aic-section--muted { background: #f6f8f9; }
.aic-section--last { padding-top: 40px; border-top: 0; }
.aic-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 44px;
}
.aic-head__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #222;
}
.aic-head__desc {
  font-size: 17px;
  line-height: 1.7;
  color: #666;
  word-break: keep-all;
}

/* ---------- 할 수 있는 일 — 카드 레이아웃 ---------- */
.aic-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.aic-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #fff;
}
.aic-card__icon { font-size: 30px; line-height: 1; color: #39c0c7; }
.aic-card__title { font-size: 20px; font-weight: 700; color: #222; }
.aic-card__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: #666;
  word-break: keep-all;
}
/* 예시 질문 — 말풍선처럼 보여 「이렇게 말하면 된다」가 먼저 읽히게 합니다. */
.aic-card__ask {
  align-self: flex-start;
  margin-top: auto !important;
  padding: 10px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #fdeceb;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #b8483f;
  word-break: keep-all;
}

/* ---------- 연결 세 단계 ---------- */
.aic-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.aic-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.aic-step__num {
  font-size: 15px;
  font-weight: 700;
  color: #f37268;
  font-variant-numeric: tabular-nums;
}
.aic-step__title { font-size: 21px; font-weight: 700; color: #222; }
.aic-step__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: #666;
  word-break: keep-all;
}
/* 연결 주소는 그대로 옮겨 적는 값이라 한 덩이로 보이고, 좁은 화면에서도 넘치지 않게 끊습니다. */
.aic-url {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
  color: #222;
  overflow-wrap: anywhere;
  user-select: all;
}
.aic-url--off { font-family: inherit; color: #888; user-select: auto; }

/* ---------- 알아 두실 것 ---------- */
.aic-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #e4e4e4;
  background: #e4e4e4;
}
.aic-fact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px;
  background: #fff;
}
.aic-fact__icon { font-size: 28px; line-height: 1; color: #39c0c7; }
.aic-fact__title { font-size: 18px; font-weight: 700; color: #222; }
.aic-fact__desc {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  word-break: keep-all;
}
.aic-fact__desc a { color: #f37268; text-decoration: underline; }

/* ---------- 문의 ---------- */
.aic-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 52px 56px;
  border-radius: 20px;
  background: #343c45;
  color: #fff;
}
.aic-cta__eyebrow { font-size: 14px; font-weight: 700; color: #39c0c7; }
.aic-cta__title { font-size: 28px; font-weight: 700; line-height: 1.35; color: #fff; }
.aic-cta__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.aic-cta__num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aic-cta__mail { font-size: 16px; color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.aic-cta__num:hover,
.aic-cta__mail:hover { color: #39c0c7; }

/* ---------- 반응형 레이아웃 ---------- */
@media (max-width: 960px) {
  .aic-hero { padding: 48px 0 64px; }
  .aic-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* `.aic figure { margin: 0 }` 보다 구체적이어야 가운데 정렬이 먹습니다. */
  .aic .aic-video--short { width: min(300px, 100%); margin: 0 auto; }
  .aic-hero__title { font-size: 30px; }
  .aic-hero__desc { font-size: 16px; }
  .aic-section { padding: 64px 0; }
  .aic-section--last { padding-top: 24px; }
  .aic-head { margin-bottom: 28px; }
  .aic-head__title { font-size: 24px; }
  .aic-cards,
  .aic-steps,
  .aic-facts { grid-template-columns: minmax(0, 1fr); }
  .aic-card,
  .aic-fact { padding: 26px 22px; }
  .aic-cta { padding: 34px 24px; }
  .aic-cta__title { font-size: 22px; }
  .aic-cta__num { font-size: 32px; }
}