/* ============================================================
   el_unified — AXAI 플래그십 페이지 전용 스타일
   출처: templates/layouts/el_axai/pages/main.html (Tailwind 유틸리티 버전)의
        카피·구조를 그대로 가져오되, 마크업/스타일은 el_unified 스택으로 재구현.
   - e-* 클래스(뱃지·버튼·카드·통계·다크섹션·롤링텍스트 등)는 eondui.css를 그대로 재사용.
   - un-* 클래스(.un-reveal 스크롤 리빌, .un-faq-* 아코디언)는 el_unified
     theme.css/catalog.css/theme.js의 기존 메커니즘을 그대로 재사용.
   - 이 파일(ax- 접두사)은 원본의 Tailwind 전용 유틸리티(그리드·간격·컬러 매핑)만
     순수 CSS로 옮긴 것 — el_gate/el_unified 어디에도 없던 새 디자인 언어는 아님.
   컬러 매핑(scripts/el_design_tailwind.config.js 기준):
     bg-canvas → var(--e-white)   bg-paper → var(--e-paper)
     text-muted → var(--e-muted)  text-ink → var(--e-ink)  text-faint → var(--e-faint)
     border-line → var(--e-line)  text-accent/bg-accent → var(--e-accent)
     max-w-page → 1200px (= --e-inner)
   ============================================================ */

/* ── 공통 레이아웃 유틸 ── */
.ax-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .ax-wrap { padding: 0 40px; } }

.ax-sec { padding: 64px 0; }
@media (min-width: 768px) { .ax-sec { padding: 96px 0; } }
.ax-sec-sm { padding: 56px 0; }
@media (min-width: 768px) { .ax-sec-sm { padding: 80px 0; } }

.ax-bg-canvas { background: var(--e-white); }
.ax-bg-paper { background: var(--e-paper); }
.ax-border-y { border-top: 1px solid var(--e-line); border-bottom: 1px solid var(--e-line); }
.ax-border-t { border-top: 1px solid var(--e-line); }
.ax-scroll-mt { scroll-margin-top: 64px; }
.ax-center { text-align: center; }
.ax-relative { position: relative; }
.ax-overflow-hidden { overflow: hidden; }
.ax-fill { position: absolute; inset: 0; }
.ax-accent { color: var(--e-accent); }
.ax-ink { color: var(--e-ink); }

.ax-br-md { display: none; }
@media (min-width: 768px) { .ax-br-md { display: block; } }

/* ── 섹션 헤더(오버라인 + 타이틀 + 설명) 공통 ── */
.ax-head { margin-bottom: 40px; }
@media (min-width: 768px) { .ax-head { margin-bottom: 56px; } }
.ax-head-center { text-align: center; }
.ax-head-eyebrow { margin-bottom: 12px; }
.ax-head-title {
  font-family: var(--e-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .ax-head-title { font-size: 2.25rem; } }
.ax-head-title-dark { color: #fff; }
.ax-head-desc {
  font-weight: 500;
  line-height: 1.625;
  max-width: 560px;
  color: var(--e-muted);
}
.ax-head-center .ax-head-desc { margin-left: auto; margin-right: auto; }
.ax-head-desc-dark { color: rgba(255, 255, 255, .5); }

/* ── 1. 히어로(다크 + 롤링 텍스트) ── */
.ax-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 24px 64px;
}
@media (min-width: 768px) {
  .ax-hero-inner { padding: 176px 40px 128px; }
}
.ax-hero-content { max-width: 760px; }
.ax-hero-badge { margin-bottom: 28px; }
@media (min-width: 768px) { .ax-hero-badge { margin-bottom: 32px; } }
.ax-hero-title {
  font-family: var(--e-font-display);
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .ax-hero-title { font-size: 3.75rem; line-height: 1.15; margin-bottom: 28px; }
}
.ax-hero-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .6);
  font-weight: 500;
  line-height: 1.625;
  margin-bottom: 32px;
  max-width: 620px;
}
@media (min-width: 768px) { .ax-hero-desc { font-size: 1.25rem; margin-bottom: 40px; } }
.ax-hero-cta { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .ax-hero-cta { flex-direction: row; } }
.ax-hero-trust { margin-top: 40px; max-width: 560px; }
@media (min-width: 768px) { .ax-hero-trust { margin-top: 48px; } }

/* ── 2. 공감(페인 포인트) ── */
.ax-pain-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ax-pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ax-pain-grid { gap: 20px; } }
@media (min-width: 1024px) { .ax-pain-grid { grid-template-columns: repeat(4, 1fr); } }
.ax-pain-icon {
  width: 44px; height: 44px;
  border-radius: var(--e-radius-xl);
  background: var(--e-white);
  border: 1px solid var(--e-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--e-ink);
  margin-bottom: 20px;
  transition: color var(--e-dur-fast) ease;
}
.ax-pain-card:hover .ax-pain-icon { color: var(--e-accent); }
.ax-pain-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; line-height: 1.375; }
.ax-pain-desc { font-size: 15px; color: var(--e-muted); line-height: 1.625; }

/* ── 3. AX란(한 줄 브릿지) ── */
.ax-bridge-eyebrow { margin-bottom: 16px; }
.ax-bridge-title {
  font-family: var(--e-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.375;
  max-width: 820px;
  margin: 0 auto 20px;
}
@media (min-width: 768px) { .ax-bridge-title { font-size: 2rem; } }
.ax-bridge-desc {
  font-size: 0.875rem;
  color: var(--e-muted);
  font-weight: 500;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.625;
}
@media (min-width: 768px) { .ax-bridge-desc { font-size: 1rem; } }

/* ── 4. 분야별 활용(솔루션 카드) ── */
.ax-sol-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ax-sol-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.ax-sol-card { padding: 28px; }
@media (min-width: 768px) { .ax-sol-card { padding: 40px; } }
.ax-sol-badge { margin-bottom: 20px; }
.ax-sol-title {
  font-family: var(--e-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .ax-sol-title { font-size: 1.5rem; margin-bottom: 24px; } }
.ax-sol-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ax-sol-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 500; color: var(--e-muted); }
.ax-sol-check { margin-top: 2px; flex-shrink: 0; color: var(--e-accent); }

/* ── 5. 서비스(다크) ── */
.ax-svc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ax-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.ax-svc-card { padding: 28px; }
@media (min-width: 768px) { .ax-svc-card { padding: 32px; } }
.ax-svc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
@media (min-width: 768px) { .ax-svc-top { margin-bottom: 24px; } }
.ax-svc-no { font-family: var(--e-font-mono); font-size: 14px; font-weight: 600; color: var(--e-accent); }
.ax-svc-tag { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ax-svc-title {
  font-family: var(--e-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .ax-svc-title { font-size: 20px; } }
.ax-svc-desc { font-size: 15px; color: rgba(255, 255, 255, .6); font-weight: 500; line-height: 1.625; }

/* ── 6. 진행 방식 ── */
.ax-proc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ax-proc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ax-proc-grid { gap: 20px; } }
@media (min-width: 1024px) { .ax-proc-grid { grid-template-columns: repeat(4, 1fr); } }
.ax-proc-card { position: relative; }
.ax-proc-no { margin-bottom: 20px; }
.ax-proc-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.ax-proc-desc { font-size: 15px; color: var(--e-muted); line-height: 1.625; margin-bottom: 16px; }
.ax-proc-chevron {
  display: none;
  position: absolute; top: 50%; right: -16px;
  transform: translateY(-50%);
  color: var(--e-faint);
  z-index: 10;
}
@media (min-width: 1024px) { .ax-proc-chevron { display: block; } }

/* ── 7. Why EOND ── */
.ax-why-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ax-why-grid { grid-template-columns: repeat(2, 1fr); gap: 56px; } }
.ax-why-eyebrow { margin-bottom: 12px; }
.ax-why-title {
  font-family: var(--e-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 24px;
}
@media (min-width: 768px) { .ax-why-title { font-size: 2.25rem; } }
.ax-why-body { display: flex; flex-direction: column; gap: 16px; font-size: 14px; color: var(--e-muted); font-weight: 500; line-height: 1.625; }
@media (min-width: 768px) { .ax-why-body { font-size: 16px; } }
.ax-why-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .ax-why-stats { gap: 20px; } }

/* ── 8. FAQ ── */
.ax-faq-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .ax-faq-wrap { padding: 0 40px; } }

/* ── 9. CTA ── */
.ax-cta-title { font-family: var(--e-font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 20px; }
@media (min-width: 768px) { .ax-cta-title { font-size: 3rem; } }
.ax-cta-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
  margin: 0 auto 32px;
  max-width: 520px;
  line-height: 1.625;
}
@media (min-width: 768px) { .ax-cta-desc { font-size: 16px; margin-bottom: 40px; } }
.ax-cta-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
@media (min-width: 640px) { .ax-cta-actions { flex-direction: row; } }
.ax-btn-full { width: 100%; }
@media (min-width: 640px) { .ax-btn-full { width: auto; } }

/* ── 10. 기존 서비스(뒷단 링크) ── */
.ax-legacy-head { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
@media (min-width: 768px) { .ax-legacy-head { flex-direction: row; align-items: flex-end; margin-bottom: 40px; } }
.ax-legacy-title { font-family: var(--e-font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; }
@media (min-width: 768px) { .ax-legacy-title { font-size: 1.5rem; } }
.ax-legacy-desc { font-size: 15px; color: var(--e-muted); font-weight: 500; max-width: 400px; line-height: 1.625; }
.ax-legacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .ax-legacy-grid { gap: 20px; } }
@media (min-width: 1024px) { .ax-legacy-grid { grid-template-columns: repeat(4, 1fr); } }
.ax-legacy-card { display: block; }
.ax-legacy-card-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; transition: color var(--e-dur-fast) ease; }
@media (min-width: 768px) { .ax-legacy-card-title { font-size: 15px; } }
.ax-legacy-card:hover .ax-legacy-card-title { color: var(--e-accent); }
.ax-legacy-card-desc { font-size: 14px; color: var(--e-muted); font-weight: 500; line-height: 1.625; margin-bottom: 16px; }
.ax-legacy-card-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--e-faint);
  transition: color var(--e-dur-fast) ease;
}
.ax-legacy-card:hover .ax-legacy-card-link { color: var(--e-ink); }
.ax-legacy-card-arrow { width: 12px; height: 12px; transition: transform var(--e-dur-fast) ease; }
.ax-legacy-card:hover .ax-legacy-card-arrow { transform: translateX(2px); }