/* AI 에이전트를 위한 세모 안내(for-ai-agents.html) 전용 — 2026-11-03.
   다른 화면과 겹치지 않게 모든 규칙은 body.ai-page 아래에서만 걸린다.
   색은 랜딩 공용 값 그대로: 보라 #7938d6 · 연보라 #f1e9fd/#f6f2fd/#f8f6fc · 글자 #191f28/#4e5968/#6b7684/#8b95a1 · 선 #e5e8eb */

/* ---- 첫 화면: 다른 안내 페이지보다 짧게(요약 카드가 바로 보이게) ------------------ */
.ai-page .page-content .subpage-hero.ai-hero { min-height: 0; padding: 80px 0 40px; }
.ai-page .page-content .subpage-hero > p.ai-eyebrow {
  display: inline-block; align-self: flex-start; margin: 0 0 24px; padding: 4px 12px; max-width: none; border-radius: 8px;
  background: #f1e9fd; color: #7938d6; font-size: 15px; line-height: 1.6; font-weight: 600; letter-spacing: -.02em;
}
.ai-page .page-content .subpage-hero > p.ai-lead { margin-top: 36px; }
.ai-page .page-content .subpage-hero > p.ai-meta { margin: 20px 0 0; max-width: 920px; font-size: 14px; line-height: 1.7; font-weight: 400; color: #8b95a1; letter-spacing: -.02em; }

.ai-page .page-content code {
  padding: 1px 6px; border-radius: 6px; background: #f6f2fd; color: #4e3a7a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ---- 한눈에 보기: 카드 넷 ------------------------------------------------------- */
.ai-page .page-content .ai-glance {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: none; margin: 56px 0 0; padding: 0; list-style: none;
}
.ai-page .page-content .ai-glance > li {
  margin: 0; padding: 24px 22px; border-radius: 20px;
  background: radial-gradient(90% 140% at 100% 0%, #efe6fc 0%, transparent 58%), linear-gradient(160deg, #faf8fe 0%, #f6f2fd 100%);
}
.ai-page .page-content .ai-glance .ai-glance__tag { margin: 0 0 8px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #7938d6; letter-spacing: -.02em; }
.ai-page .page-content .ai-glance .ai-glance__title { margin: 0 0 10px; font-size: 19px; line-height: 1.45; font-weight: 600; letter-spacing: -.04em; color: #191f28; }
.ai-page .page-content .ai-glance p:last-child { margin: 0; font-size: 15px; line-height: 1.7; font-weight: 400; color: #6b7684; letter-spacing: -.03em; }

/* ---- 비교표: 넓은 화면은 표, 휴대폰은 줄마다 카드 ----------------------------------- */
.ai-page .page-content .ai-compare-wrap { margin-top: 32px; max-width: 1080px; }
.ai-page .page-content .ai-compare { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.ai-page .page-content .ai-compare caption { margin-bottom: 16px; font-size: 15px; font-weight: 500; color: #8b95a1; }
.ai-page .page-content .ai-compare th:first-child { width: 16%; }
.ai-page .page-content .ai-compare thead th { font-size: 17px; }
.ai-page .page-content .ai-compare thead th:last-child { color: #7938d6; }
.ai-page .page-content .ai-compare tbody td:last-child { color: #333d4b; background: #faf8fe; font-weight: 400; }
.ai-page .page-content .ai-compare--two th:first-child { width: 20%; }

/* ---- 감사 증빙 카드·인증 띠 ------------------------------------------------------ */
.ai-page .page-content .ai-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: none; margin: 40px 0 0; padding: 0; list-style: none;
}
.ai-page .page-content .ai-cards > li { margin: 0; padding: 24px 22px; border-radius: 20px; background: #f8f6fc; }
.ai-page .page-content .ai-cards h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; color: #191f28; }
.ai-page .page-content .ai-cards p { margin: 0; font-size: 15px; line-height: 1.7; font-weight: 400; }
.ai-page .page-content .ai-badges {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  max-width: none; margin: 24px 0 28px; padding: 0; list-style: none;
}
.ai-page .page-content .ai-badges > li {
  margin: 0; padding: 16px 18px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(121, 56, 214, .1), 0 8px 24px rgba(73, 38, 140, .05);
}
.ai-page .page-content .ai-badge__name { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; color: #191f28; letter-spacing: -.03em; }
.ai-page .page-content .ai-badge__note { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: #6b7684; }
.ai-page .ai-nowrap { white-space: nowrap; }

/* ---- MCP 주소·도구 순서 ---------------------------------------------------------- */
.ai-page .page-content .ai-endpoint { max-width: 840px; margin: 8px 0 0; padding: 22px 24px; border-radius: 18px; background: #191f28; color: #f2f4f6; }
.ai-page .page-content .ai-endpoint p { max-width: none; color: inherit; }
.ai-page .page-content .ai-endpoint__label { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: #b0b8c1; }
.ai-page .page-content .ai-endpoint__url { margin: 0 0 12px; font-size: 20px; line-height: 1.5; }
.ai-page .page-content .ai-endpoint__url code { padding: 0; background: none; color: #fff; font-size: 1em; }
.ai-page .page-content .ai-endpoint__note { margin: 0; font-size: 15px; line-height: 1.7; font-weight: 400; color: #d1d6db; }
.ai-page .page-content .ai-endpoint__note code { background: rgba(255, 255, 255, .12); color: #fff; }

.ai-page .page-content ol.ai-steps { counter-reset: ai-step; max-width: 840px; margin: 28px 0 0; padding: 0; list-style: none; }
.ai-page .page-content ol.ai-steps > li { counter-increment: ai-step; position: relative; margin: 0; padding: 0 0 0 48px; }
.ai-page .page-content ol.ai-steps > li + li { margin-top: 20px; }
.ai-page .page-content ol.ai-steps > li::before {
  content: counter(ai-step); position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: #f1e9fd; color: #7938d6; font-size: 14px; font-weight: 600;
}
.ai-page .page-content .ai-steps p { margin: 0; font-size: 16px; line-height: 1.7; }
.ai-page .page-content .ai-steps .ai-steps__tool { margin-bottom: 2px; color: #191f28; font-weight: 500; }
.ai-page .page-content .ai-steps__member { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #eef2ff; color: #3b4fb8; font-size: 12.5px; font-weight: 600; }
.ai-page .page-content p.ai-note { margin-top: 20px; font-size: 15px; line-height: 1.7; }

.ai-page .page-content p.ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.ai-page .page-content .ai-cta__primary {
  display: inline-block; padding: 12px 20px; border-radius: 12px; background: #7938d6; color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none; letter-spacing: -.02em;
}
.ai-page .page-content .ai-cta__primary:hover { background: #6a2cc4; }
.ai-page .page-content .ai-cta__hint { font-size: 14px; color: #8b95a1; }

/* ---- 영어 요약 ------------------------------------------------------------------ */
.ai-page .page-content .ai-en { max-width: 1080px; padding: 40px 40px 36px; border-radius: 24px; background: #f8f9fa; }
.ai-page .page-content .ai-en h2 { font-size: 32px; letter-spacing: -.03em; }
.ai-page .page-content .ai-en p,
.ai-page .page-content .ai-en ul { max-width: 920px; font-size: 16px; line-height: 1.7; letter-spacing: -.01em; font-weight: 400; word-break: normal; }
.ai-page .page-content .ai-en li + li { margin-top: 12px; }
.ai-page .page-content .ai-en strong { color: #191f28; font-weight: 600; }

/* ---- 태블릿 --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ai-page .page-content :is(.ai-glance, .ai-cards, .ai-badges) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 휴대폰: 한 줄씩, 가로 넘침 없이 -------------------------------------------- */
@media (max-width: 640px) {
  /* 이 화면만: 본문·머리·바닥의 안쪽 여백(64px)을 없애 몸통 여백(24px)만 남긴다 */
  body.ai-page { --content-inset: 0px; --page-title-size: 40px; --page-section-title-size: 30px; --page-section-space: 72px; --page-hero-description-size: 18px; }
  /* 머리 메뉴가 390px 를 넘어 가로로 밀리지 않게 — 로고·시작하기 한 줄, 메뉴는 아래 줄(제 안에서만 밀린다) */
  body.ai-page > header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; min-height: 0; padding: 14px 0 6px; }
  body.ai-page > header nav[aria-label="주요 메뉴"] {
    grid-row: 2; grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; gap: 16px; overflow-x: auto; padding-block: 6px; font-size: 15px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.ai-page > header nav[aria-label="주요 메뉴"]::-webkit-scrollbar { display: none; }
  body.ai-page > header a.header-cta { padding: 8px 14px; }

  .ai-page .page-content .subpage-hero.ai-hero { padding: 48px 0 16px; }
  .ai-page .page-content .subpage-hero > p.ai-eyebrow { font-size: 14px; margin-bottom: 16px; }
  .ai-page .page-content .subpage-hero > p.ai-lead { margin-top: 24px; }
  .ai-page .page-content p { font-size: 16px; }
  .ai-page .page-content h2 + p { font-size: 17px; }
  .ai-page .page-content :is(ul, ol) { font-size: 16px; padding-left: 22px; }
  .ai-page .page-content h3 { margin-top: 40px; font-size: 20px; }
  .ai-page .page-content :is(.ai-glance, .ai-cards, .ai-badges) { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .ai-page .page-content .ai-glance > li,
  .ai-page .page-content .ai-cards > li { padding: 20px 18px; }

  /* 비교표 → 줄마다 카드. 칸 이름은 data-label 로 붙인다 */
  .ai-page .page-content .ai-compare,
  .ai-page .page-content .ai-compare :is(tbody, tr, th, td) { display: block; width: auto; }
  .ai-page .page-content .ai-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ai-page .page-content .ai-compare caption { display: block; }
  .ai-page .page-content .ai-compare tbody tr { margin: 0 0 12px; padding: 16px; border: 0; border-radius: 16px; background: #f8f9fa; }
  .ai-page .page-content .ai-compare :is(th, td) { padding: 0; min-width: 0; }
  .ai-page .page-content .ai-compare th:first-child { width: auto; margin-bottom: 8px; font-size: 17px; font-weight: 600; color: #191f28; }
  .ai-page .page-content .ai-compare td { font-size: 15px; line-height: 1.65; }
  .ai-page .page-content .ai-compare td + td { margin-top: 10px; }
  .ai-page .page-content .ai-compare td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: #8b95a1; }
  .ai-page .page-content .ai-compare tbody td:last-child { padding: 10px 12px; border-radius: 10px; background: #fff; }
  .ai-page .page-content .ai-compare tbody td:last-child::before { color: #7938d6; }
  .ai-page .page-content .ai-compare--two tbody td:last-child::before { display: none; }

  .ai-page .page-content .ai-endpoint { padding: 18px; }
  .ai-page .page-content .ai-endpoint__url { font-size: 16px; }
  .ai-page .page-content ol.ai-steps > li { padding-left: 42px; }
  .ai-page .page-content .ai-en { padding: 24px 18px; border-radius: 18px; }
  .ai-page .page-content .ai-en h2 { font-size: 24px; }
  .ai-page .page-content details > p { padding: 0 4px 22px; }
  .ai-page .page-content summary { font-size: 17px; padding: 18px 0; }
}