@charset "UTF-8";

/* =====================================================================
   다우오피스 AI 랜딩 (ai.jsp) 전용 스타일
   - 2025_content.css / common_new.css 에 이미 정의된 구조(.content_head,
     .area_function 탭, .feature_grid, .area_faq, .content_foot 등)는
     "재사용"하고, 여기서는 AI 페이지 고유의 토큰 · 색상 · 신규 섹션만 정의한다.
   - 첨부 CSS와 중복되는 선언은 작성하지 않는다. (색상/사이즈 override 위주)
   - 이미지는 추후 교체 예정 → 배경 그라데이션 + placeholder 로 우선 퍼블리싱.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 공통 토큰 (색상 · 그라데이션) — AI 테마 = 바이올렛/퍼플
   기존 페이지의 민트(#00C3E0) 계열을 이 페이지에서만 퍼플로 치환한다.
   --------------------------------------------------------------------- */
.function.ai {
  --ai: #6C5CE7;
  --ai-strong: #5A46E0;
  --ai-soft: #F2EFFE;      /* 라벨/칩 배경 */
  --ai-line: #E7E3FB;      /* 카드 보더 */
  --ai-sub: #8A8A97;       /* 보조 텍스트 */
  --ai-ink: #2B2B33;       /* 진한 헤더 */
  --ai-grad: linear-gradient(90deg, #4C8DFF 0%, #8B6FF0 100%);
  --ai-grad-b: linear-gradient(180deg, #7C6BF5 0%, #5A8CF0 100%);
}

/* ---------------------------------------------------------------------
   1. 공통 모션 — 스크롤 진입 리빌 (JS: IntersectionObserver)
   DOM 에 콘텐츠가 그대로 존재하므로 SEO 영향 없음. 렌더 부하도 낮음.
   --------------------------------------------------------------------- */
.function.ai [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.function.ai [data-reveal].is-in { opacity: 1; transform: none; }
.function.ai [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
.function.ai [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
.function.ai [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
.function.ai [data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .function.ai [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   2. HERO (.content_head) — 구조 재사용, 상단 문구 크기/색상만 변경
   Figma: 작은 "AI" 포인트 → 얇은 서브카피 → 큰 볼드 타이틀
   --------------------------------------------------------------------- */
.function.ai .content_head .point {
background: var(--ai-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; font-size: 24px;
}


/* 히어로 썸네일 (영상 제작 후 교체 예정) */
.function.ai .hero_thumb {
  margin: 56px 0 0; padding: 0 20px;
}
.function.ai .hero_thumb .thumb_inner {
  border-radius: 28px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #EAF1FF 0%, #F1ECFF 60%, #F7F3FF 100%);
  aspect-ratio: 16 / 9;   /* 실제 영상 해상도 3840×2160(16:9) 기준 — 로드 전 자리 확보용 */
  box-shadow: 0 30px 60px rgba(92, 70, 224, .12);
}
/* 영상은 원본 비율 그대로 유지 → 창 너비에 맞춰 비율대로 축소.
   컨테이너 비율을 실제 영상과 동일한 16:9로 맞춰 잘림·검정 여백이 생기지 않는다. */
.function.ai .hero_thumb img,
.function.ai .hero_thumb video { width: 100%; height: auto; display: block; }
/* 영상 제작 전 안내 배지 (영상 교체 시 삭제) */
.function.ai .hero_thumb .thumb_note {
  position: absolute; top: 16px; right: 16px; padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600; color: var(--ai-strong);
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(4px);
}

/* HERO 버튼 — AI 그라데이션 (기본 .btn_general 위에 override) */
.function.ai .content_head .btn_general,
.function.ai .content_foot .btn_general {
  background: var(--ai-grad); border: none; color: #fff;
}
.function.ai .content_head .btn_general:hover,
.function.ai .content_foot .btn_general:hover { filter: brightness(1.05); }

/* ---------------------------------------------------------------------
   3. 라벨 칩 색상 override — 기존 .label.core(민트) → AI 퍼플
   탭 섹션(자세히/에이전트/메일/관리자) 구조는 그대로 두고 "태그 색상만 변경"
   --------------------------------------------------------------------- */
.function.ai .area_function .title_wrap .title p.label.core,
.function.ai .title_wrap .label.core {
  color: var(--ai); background-color: var(--ai-soft);
}
/* 자세히보기 버튼 hover 색도 AI 퍼플로 */
.function.ai a.btn_outline.core:hover { color: var(--ai) !important; border-color: var(--ai); }

/* ---------------------------------------------------------------------
   4. "우선 핵심부터" — 핵심기능 카드 그리드 (신규 섹션)
   Figma: 상단 2카드(큰) + 하단 3카드
   --------------------------------------------------------------------- */
.function.ai .area_core { padding: 40px 0 60px; margin: 0 auto; }
.function.ai .area_core .inner { max-width: 1200px; margin: 0 auto; }
.function.ai .area_core .title_wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 44px; }
.function.ai .area_core .title_wrap .label {
  display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 15px; font-weight: 600;
  color: var(--ai); background: var(--ai-soft); line-height: 140%;
}
.function.ai .area_core .title_wrap h2 { text-align: left; }

.function.ai .core_grid { display: flex; flex-direction: column; gap: 24px; }
.function.ai .core_grid .row { display: grid; gap: 24px; }
.function.ai .core_grid .row.r2 { grid-template-columns: 1fr 1fr; }
.function.ai .core_grid .row.r3 { grid-template-columns: repeat(3, 1fr); }

/* 카드: 흰색 배경 + 이미지와 텍스트박스가 바로 붙는 구조 */
.function.ai .core_card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--ai-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(108, 92, 231, .04);
  animation: coreGlow 4s ease-in-out infinite;
}
/* 카드 1→5로 위상 균등 분배 → 밝은 지점이 촤라락 끊김 없이 흐르며 seamless 루프 */
.function.ai .core_grid .row.r2 .core_card:nth-child(1) { animation-delay: 0s; }
.function.ai .core_grid .row.r2 .core_card:nth-child(2) { animation-delay: .8s; }
.function.ai .core_grid .row.r3 .core_card:nth-child(1) { animation-delay: 1.6s; }
.function.ai .core_grid .row.r3 .core_card:nth-child(2) { animation-delay: 2.4s; }
.function.ai .core_grid .row.r3 .core_card:nth-child(3) { animation-delay: 3.2s; }
/* 그림자는 훨씬 은은하게, 넓고 부드럽게 떠올랐다 가라앉음(인접 카드와 겹쳐 자연스럽게 연결) */
@keyframes coreGlow {
  0%   { box-shadow: 0 4px 14px rgba(108, 92, 231, .04); }
  20%  { box-shadow: 0 10px 26px rgba(124, 107, 245, .18), 0 4px 14px rgba(76, 141, 255, .13); }
  45%  { box-shadow: 0 4px 14px rgba(108, 92, 231, .04); }
  100% { box-shadow: 0 4px 14px rgba(108, 92, 231, .04); }
}
/* 이미지: 카드 폭에 꽉 차게 붙음 (자체 배경 포함된 에셋) */
.function.ai .core_card .thumb { margin: 0; padding: 0; display: block; font-size: 0; }
.function.ai .core_card .thumb img { width: 100%; height: auto; display: block; }
/* 텍스트박스: 이미지 바로 아래 */
.function.ai .core_card .txt { text-align: center; padding: 28px 24px 34px; }
.function.ai .core_card .txt h3 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 10px; }
.function.ai .core_card .txt p { font-size: 16px; font-weight: 400; color: var(--ai-sub); line-height: 155%; }
@media (prefers-reduced-motion: reduce) { .function.ai .core_card { animation: none; } }

/* ---------------------------------------------------------------------
   5. AI 에이전트 카드 롤링 (에이전트 예시 카드 마퀴)
   --------------------------------------------------------------------- */
.function.ai .agent_rolling { background: #261A38; padding: 84px 0; overflow: hidden; }
.function.ai .agent_rolling .roll_head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 1200px; margin: 0 auto 44px; padding: 0 20px; text-align: center;
}
/* 라벨: 그라데이션 타이포 (칩 배경 없음) */
.function.ai .agent_rolling .roll_head .label.core {
  display: inline-block; padding: 0; font-size: 22px; font-weight: 500; line-height: 140%;
  background: linear-gradient(90deg, #F9CCFF 0%, #A1E0FF 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 제목: 흰색 */
.function.ai .agent_rolling .roll_head h2 { color: #fff; }
.function.ai .agent_rolling .roll_head .text-center { text-align: center !important; }
.function.ai .agent_rolling .roll_track { display: flex; gap: 20px; width: max-content; animation: aiAgentRoll 42s linear infinite; }
/* 카드에 정확히 호버할 때만 해당 줄 정지 (여백/근처 호버는 무시) */
.function.ai .agent_rolling .roll_track:has(.agent_card:hover),
.function.ai .agent_rolling .roll_line:has(.agent_card:hover) { animation-play-state: paused; }
.function.ai .agent_rolling .roll_mo { display: none; }  /* 모바일에서만 2줄 롤링 노출 */
/* 카드 기본: 폭 400(문구 최대 2줄) · 3종 그라데이션(nth-child) · 곡선/원형 물결 애니메이션 */
.function.ai .agent_rolling .agent_card {
  position: relative; flex: 0 0 auto; width: 400px; padding: 26px 28px 28px; box-sizing: border-box;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .55);
  background-size: 165% 165%; background-repeat: no-repeat;
  animation: cardWave 12s ease-in-out infinite;
  box-shadow: 0 12px 30px rgba(120, 150, 255, .28);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, filter .4s ease;
}
/* 각 variant = [빛반사 sheen] + [원형 블롭 3개 배치 상이] + [베이스] → 서로 다른 색감 */
/* A: 블루 → 퍼플 */
.function.ai .agent_rolling .agent_card:nth-child(3n+1) {
  animation-delay: 0s;
  background-image:
    radial-gradient(150% 115% at -6% 126%, rgba(255,255,255,0) 45%, rgba(255,255,255,.52) 54%, rgba(255,255,255,0) 64%),
    radial-gradient(80% 80% at 10% 6%, rgba(130,158,255,.85) 0%, rgba(130,158,255,0) 60%),
    radial-gradient(85% 85% at 96% 30%, rgba(196,166,255,.72) 0%, rgba(196,166,255,0) 62%),
    radial-gradient(95% 95% at 88% 106%, rgba(224,168,252,.6) 0%, rgba(224,168,252,0) 60%),
    linear-gradient(135deg, #BCC4FF 0%, #CFC6F5 60%, #D6C7F2 100%);
}
/* B: 퍼플 → 핑크 */
.function.ai .agent_rolling .agent_card:nth-child(3n+2) {
  animation-delay: -4s;
  background-image:
    radial-gradient(150% 115% at 108% -8%, rgba(255,255,255,0) 45%, rgba(255,255,255,.52) 54%, rgba(255,255,255,0) 64%),
    radial-gradient(82% 82% at 8% 10%, rgba(202,160,255,.82) 0%, rgba(202,160,255,0) 60%),
    radial-gradient(85% 85% at 98% 26%, rgba(250,188,238,.68) 0%, rgba(250,188,238,0) 62%),
    radial-gradient(95% 95% at 90% 106%, rgba(150,176,255,.55) 0%, rgba(150,176,255,0) 60%),
    linear-gradient(135deg, #D6C2F6 0%, #E2C6EF 55%, #C9C6F6 100%);
}
/* C: 시안 → 블루 */
.function.ai .agent_rolling .agent_card:nth-child(3n) {
  animation-delay: -8s;
  background-image:
    radial-gradient(150% 115% at 112% 122%, rgba(255,255,255,0) 45%, rgba(255,255,255,.5) 54%, rgba(255,255,255,0) 64%),
    radial-gradient(82% 82% at 10% 8%, rgba(120,205,255,.78) 0%, rgba(120,205,255,0) 60%),
    radial-gradient(85% 85% at 96% 28%, rgba(150,176,255,.7) 0%, rgba(150,176,255,0) 62%),
    radial-gradient(95% 95% at 90% 106%, rgba(200,168,252,.55) 0%, rgba(200,168,252,0) 60%),
    linear-gradient(135deg, #BFDBFF 0%, #C7CCF6 55%, #D3C7F2 100%);
}
/* hover: 살짝 커지고, 그라데이션이 더 빠르게 일렁이며, 밝은 글로우 그림자 */
/* hover: 그라데이션이 더 진하게(채도·명도↑) 빠르게 물결치고, 그림자도 더 강하게 */
.function.ai .agent_rolling .agent_card:hover {
  transform: scale(1.06);
  filter: saturate(1.32) brightness(1.05);
  box-shadow: 0 20px 46px rgba(120, 140, 255, .52), 0 0 34px rgba(218, 162, 252, .45);
  animation-duration: 5s;
}
/* 곡선 블롭이 부드럽게 떠다니듯 일렁이는 모션 (직선 이동 X) */
@keyframes cardWave {
  0%   { background-position: 28% 28%; }
  50%  { background-position: 72% 62%; }
  100% { background-position: 28% 28%; }
}
@media (prefers-reduced-motion: reduce) {
  .function.ai .agent_rolling .agent_card { animation: none; }
  .function.ai .agent_rolling .agent_card:hover { transform: none; }
}
/* 아이콘: 직접 제작한 투명 배경 56px 이미지 영역만 (halo는 카드 좌상단 wash로 처리) */
.function.ai .agent_rolling .agent_card .ac_ic {
  position: relative; z-index: 1;
  display: block; width: 56px; height: 56px; margin-bottom: 14px; object-fit: contain;
}
/* 좌상단 모서리에서 은은하게 밝아지는 wash — 동그라미 아님, 배경과 자연스럽게 어우러짐.
   카드 물결 애니메이션과 분리(::before)되어 위치 고정, 퍼플 아이콘 가독성만 살짝 확보 */
.function.ai .agent_rolling .agent_card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
}
.function.ai .agent_rolling .agent_card:nth-child(3n+1)::before { background: radial-gradient(95% 88% at 0% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%); }
.function.ai .agent_rolling .agent_card:nth-child(3n+2)::before { background: radial-gradient(88% 82% at 2% 0%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 42%); }
.function.ai .agent_rolling .agent_card:nth-child(3n)::before   { background: radial-gradient(100% 92% at 0% 4%, rgba(255,255,255,.44) 0%, rgba(255,255,255,0) 50%); }
.function.ai .agent_rolling .agent_card .ac_tit { position: relative; z-index: 1; display: block; font-size: 19px; font-weight: 700; color: #24243A; }
.function.ai .agent_rolling .agent_card .ac_desc { position: relative; z-index: 1; margin-top: 10px; font-size: 16px; color: #252525a3; line-height: 150%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.function.ai .agent_rolling .agent_card .ac_tag {
  position: absolute; z-index: 2; top: 20px; right: 20px; padding: 5px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #fff; background: #8E88FF;
}
@keyframes aiAgentRoll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes aiAgentRollRev {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ---------------------------------------------------------------------
   6. 다우오피스 AI 차별점 비교 (개선안 · 신규 섹션)
   Figma 개선: 좌(다우오피스 AI, 강조) vs 우(타사 AI, 흐림) 5개 항목
   --------------------------------------------------------------------- */
.function.ai .area_compare { padding: 60px 0 100px; margin: 0 auto; }
.function.ai .area_compare .inner { max-width: 1000px; margin: 0 auto; }
.function.ai .area_compare .title_wrap { margin-bottom: 44px; }
.function.ai .area_compare .title_wrap h2 { text-align: left; }

/* 2컬럼 flat 그리드 — 같은 카테고리가 같은 grid row → 두 박스 높이 자동 정렬(높은 쪽 기준) */
.function.ai .area_compare .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: stretch; }

.function.ai .area_compare .cmp_head {
  text-align: center; padding: 16px 0; border-radius: 14px;
  font-size: 22px; font-weight: 700; letter-spacing: -.5px;
}
.function.ai .area_compare .cmp_head.ours { color: #fff; background: var(--ai-ink); }
.function.ai .area_compare .cmp_head.theirs { color: #fff; background: #B9BAC2; }
/* 다우오피스 AI 헤더 텍스트: 에이전트 카드 라벨과 동일한 그라데이션 */
.function.ai .area_compare .cmp_head.ours span {
  background: linear-gradient(90deg, #F9CCFF 0%, #A1E0FF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.function.ai .area_compare .cmp_item {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px 22px; border-radius: 18px; text-align: center;
  background: #fff; transition: transform .3s ease, box-shadow .3s ease;
}
/* 태그: 텍스트 너비에 맞게(늘어나지 않게) + 중앙 정렬 */
.function.ai .area_compare .cmp_item .tag { align-self: center; width: auto; flex: 0 0 auto; }
/* 우리(강조): 퍼플 그라데이션 보더 */
.function.ai .area_compare .cmp_item.ours {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--ai-grad-b) border-box;
  box-shadow: 0 8px 22px rgba(108, 92, 231, .08);
}
.function.ai .area_compare .cmp_item.ours:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(108, 92, 231, .16); }
/* 타사(흐림): 회색 */
.function.ai .area_compare .cmp_item.theirs { border: 1px solid #ECECEF; background: #F5F6F8; }

.function.ai .area_compare .cmp_item .tag {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1;
}
.function.ai .area_compare .cmp_item.ours .tag { color: #fff; background: var(--ai); }
.function.ai .area_compare .cmp_item.theirs .tag { color: #9A9BA3; background: #E7E8EB; }
/* 아이콘은 다우오피스(ours) 태그에만 — 타사(회색) 박스는 아이콘 없음 (웹·모바일 공통) */
.function.ai .area_compare .cmp_item.ours .tag::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px; display: inline-block;
  background: currentColor;
  -webkit-mask: var(--cmp-ic) center / contain no-repeat; mask: var(--cmp-ic) center / contain no-repeat;
}
.function.ai .area_compare .tag.ic_billing { --cmp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='2'/%3E%3Cpath d='M1.8 6.6h12.4'/%3E%3C/svg%3E"); }
.function.ai .area_compare .tag.ic_cost { --cmp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cellipse cx='8' cy='4.3' rx='5' ry='2'/%3E%3Cpath d='M3 4.3v3.2c0 1.1 2.24 2 5 2s5-.9 5-2V4.3'/%3E%3Cpath d='M3 7.5v3.2c0 1.1 2.24 2 5 2s5-.9 5-2V7.5'/%3E%3C/svg%3E"); }
.function.ai .area_compare .tag.ic_features { --cmp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='2' y='2' width='5' height='5' rx='1'/%3E%3Crect x='9' y='2' width='5' height='5' rx='1'/%3E%3Crect x='2' y='9' width='5' height='5' rx='1'/%3E%3Crect x='9' y='9' width='5' height='5' rx='1'/%3E%3C/svg%3E"); }
.function.ai .area_compare .tag.ic_agent { --cmp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='5.5' width='10' height='7.5' rx='2'/%3E%3Cpath d='M8 2.6V5.5'/%3E%3Ccircle cx='8' cy='2.2' r='1'/%3E%3Ccircle cx='6.4' cy='9' r='.9'/%3E%3Ccircle cx='9.6' cy='9' r='.9'/%3E%3C/svg%3E"); }
.function.ai .area_compare .tag.ic_env { --cmp-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='1.5' y='3' width='9' height='7' rx='1'/%3E%3Cpath d='M4 12.5h4'/%3E%3Crect x='11' y='6' width='3.6' height='7' rx='1'/%3E%3C/svg%3E"); }
.function.ai .area_compare .cmp_item p { font-size: 17px; font-weight: 500; line-height: 155%; color: #333; }
.function.ai .area_compare .cmp_item.theirs p { color: #9A9BA3; font-weight: 400; }

/* ---------------------------------------------------------------------
   7. 하단 CTA (.content_foot) — 배경만 AI 퍼플 그라데이션으로 override
   --------------------------------------------------------------------- */
.function.ai .content_foot {
  /* 그라데이션 배경(그대로 유지) + 푸터 이미지는 .foot_deco <img> 로 얹음 */
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 80% 10%, #C7D4FF 0%, rgba(199,212,255,0) 55%),
    radial-gradient(120% 140% at 10% 90%, #E4D8FF 0%, rgba(228,216,255,0) 55%),
    linear-gradient(120deg, #DCE4FF 0%, #E9E2FF 50%, #F2ECFF 100%);
  color: #2B2B33;
}
/* 푸터 이미지: 그라데이션 위에 풀블리드로 얹기 (텍스트는 위 레이어) */
.function.ai .content_foot .foot_deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0; pointer-events: none; display: block;
}
.function.ai .content_foot > .title_wrap,
.function.ai .content_foot > .btn_wrap { position: relative; z-index: 1; }
.function.ai .content_foot .main_title .sub { color: #4B4B55; }
.function.ai .content_foot h2 { color: #2B2B33; }

/* ---------------------------------------------------------------------
   8. 반응형
   --------------------------------------------------------------------- */
@media (max-width: 999px) {
  .function.ai .content_head { padding: 0px !important; }
  .function.ai .content_head .btn_wrap {padding: 0 6% !important }
  .function.ai .content_head .main_title h1 { font-size: 40px; }
  .function.ai .content_head .main_title h1 .sub { font-size: 24px; }
  .function.ai .hero_thumb { margin-top: 36px; }

  .function.ai .core_grid .row.r2,
  .function.ai .core_grid .row.r3 { grid-template-columns: 1fr; }

  .function.ai .agent_rolling .agent_card { width: 260px; }
}

@media (max-width: 768px) {
  .function.ai .content_head .main_title h1 { font-size: 32px; }
  .function.ai .content_head .main_title h1 .sub { font-size: 20px; }
  .function.ai [data-reveal].is-in {padding: 0 0 24px}
  .function.ai .hero_thumb .thumb_inner { border-radius: 0px; }

  .function.ai .area_core,
  .function.ai .area_compare { padding-inline: 6%; }
  .function.ai .area_core .title_wrap h2,
  .function.ai .area_compare .title_wrap h2 { font-size: 26px; }

  /* 비교표는 모바일에서도 좌우 대비 유지 (칸만 축소) */
  .function.ai .area_compare .cmp { gap: 12px; }
  .function.ai .area_compare .cmp_head { font-size: 16px; padding: 12px 0; }
  .function.ai .area_compare .cmp_item { padding: 18px 12px; border-radius: 14px; }
  .function.ai .area_compare .cmp_item .tag { font-size: 12px; padding: 4px 8px; margin-bottom: 10px; }
  .function.ai .area_compare .cmp_item p { font-size: 14px; }

  .function.ai .core_card .txt h3 { font-size: 20px; }
  .function.ai .core_card .txt p { font-size: 15px; }

  /* 에이전트 롤링: 모바일은 2줄 롤링 (한 줄=PC용 숨김) */
  .function.ai .agent_rolling { padding: 60px 0; }
  .function.ai .agent_rolling .roll_pc { display: none; }
  .function.ai .agent_rolling .roll_mo { display: flex; flex-direction: column; gap: 14px; }
  .function.ai .agent_rolling .roll_mo .roll_line { display: flex; gap: 14px; width: max-content; }
  .function.ai .agent_rolling .roll_mo .roll_line.l1 { animation: aiAgentRoll 30s linear infinite; }
  .function.ai .agent_rolling .roll_mo .roll_line.l2 { animation: aiAgentRollRev 30s linear infinite; }
  .function.ai .agent_rolling .agent_card { width: 250px; padding: 20px 20px 22px; }
  .function.ai .agent_rolling .agent_card .ac_ic { width: 48px; height: 48px; margin-bottom: 12px; }
  .function.ai .agent_rolling .agent_card .ac_tit { font-size: 17px; }
  .function.ai .agent_rolling .agent_card .ac_desc { font-size: 13px; margin-top: 8px; }
  .function.ai .agent_rolling .agent_card .ac_tag { top: 16px; right: 16px; font-size: 12px; padding: 4px 9px; }
  .function.ai .agent_rolling .roll_head .label.core { font-size: 18px; }
}