@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

/* ============================================
   AIXEN DARK THEME — Design Tokens
   ============================================ */
:root {
  /* [2026-08-06] 브라우저 기본(네이티브) 위젯을 다크로 렌더 —
     select 드롭다운 팝업, input[type=date] 달력·시계 아이콘, 스크롤바, 체크박스 등.
     이걸 안 주면 컨트롤 겉모습만 다크고 펼친 목록은 흰 배경 시스템 UI 로 나와
     "디자인이 너무 기본" 으로 보인다. 라이트 테마에서는 아래에서 되돌린다. */
  color-scheme: dark;

  --primary: #6C63FF;          /* 보라 (cool) */
  --primary-dark: #5A52D5;
  --primary-light: #8B85FF;
  --secondary: #00D9B5;        /* 청록 (cool) */
  --secondary-dark: #00B096;
  /* === 액센트 컬러 — 전체 cool 톤 통일 (warm red/orange/yellow 폐지) === */
  --accent: #EC4899;           /* 쿨 핑크 (이전: FF6B6B 코랄 레드) */
  --accent-orange: #38BDF8;    /* 스카이 블루 (이전: FF9A3C 오렌지) */
  --accent-yellow: #22D3EE;    /* 시안 (이전: FFD93D 옐로우) */

  --bg-primary: #0D0D1A;
  --bg-secondary: #141428;
  --bg-card: #1A1A35;
  --bg-card-hover: #20203F;
  --bg-sidebar: #111124;
  --bg-header: rgba(13, 13, 26, 0.95);

  --text-primary: #F0F0FF;
  --text-secondary: #A0A0C0;
  --text-muted: #6060A0;

  --border-color: rgba(108, 99, 255, 0.2);
  --border-hover: rgba(108, 99, 255, 0.5);
  --border-radius-sm: 8px;
  --border-radius: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 28px;

  --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #00D9B5 100%);
  --gradient-hero: linear-gradient(135deg, #0D0D1A 0%, #1a1040 50%, #0D1A2A 100%);
  --gradient-card: linear-gradient(135deg, rgba(108,99,255,0.1) 0%, rgba(0,217,181,0.05) 100%);
  /* gradient-accent — warm 폐지, cool 핑크→보라 */
  --gradient-accent: linear-gradient(135deg, #EC4899 0%, #6C63FF 100%);
  --gradient-blue: linear-gradient(135deg, #4FC3F7 0%, #6C63FF 100%);

  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px rgba(108,99,255,0.3);

  --aix-font: 'Noto Sans KR', 'Inter', sans-serif;
  --container-max: 1280px;

  --aix-sp-1: 0.25rem; --aix-sp-2: 0.5rem; --aix-sp-3: 0.75rem; --aix-sp-4: 1rem;
  --aix-sp-6: 1.5rem; --aix-sp-8: 2rem; --aix-sp-12: 3rem; --aix-sp-16: 4rem;
  --aix-sp-20: 5rem;
}

/* ============================================
   RESET / SCOPED OVERRIDE
   페이지에 .aix-dark 가 붙으면 다크 테마 적용
   ============================================ */
body.aix-dark {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--aix-font);
  -webkit-font-smoothing: antialiased;
}

body.aix-dark .wrap { background: var(--bg-primary); }
body.aix-dark a { color: inherit; text-decoration: none; }

/* eGov 공통 헤더/푸터가 다크 테마와 충돌하지 않게 보정 */
body.aix-dark #header,
body.aix-dark .header,
body.aix-dark .skip_navi { color: inherit; }

body.aix-dark #footer,
body.aix-dark .footer-aix {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

/* ============================================
   CONTAINERS
   ============================================ */
.aix-container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--aix-sp-6);
}

.aix-section { padding: var(--aix-sp-20) 0; }
.aix-section-sm { padding: var(--aix-sp-12) 0; background: var(--bg-secondary); }

.aix-section-header { text-align: center; margin-bottom: var(--aix-sp-12); }

.aix-eyebrow {
  display: inline-flex; align-items: center; gap: var(--aix-sp-2);
  padding: 6px 16px;
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.3);
  border-radius: 50px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: var(--aix-sp-4);
}
.aix-eyebrow > i {
  width: 14px;
  font-size: 12px;
  color: currentColor;
  text-align: center;
}

.aix-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 var(--aix-sp-4);
}
.aix-section-title .highlight,
.aix-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aix-section-desc {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 640px; margin: 0 auto;
  line-height: 1.7;
}

/* ============================================
   BUTTONS
   ============================================ */
.aix-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem; font-weight: 600;
  font-family: var(--aix-font);
  cursor: pointer; border: none;
  white-space: nowrap; line-height: 1;
  transition: all .25s ease;
  text-decoration: none;
}
.aix-btn-primary {
  background: var(--gradient-primary); color: #fff;
  box-shadow: 0 4px 16px rgba(108,99,255,0.4);
}
.aix-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,99,255,0.55); color:#fff; }
.aix-btn-secondary {
  background: transparent; color: var(--primary-light);
  border: 1.5px solid var(--border-hover);
}
.aix-btn-secondary:hover { background: rgba(108,99,255,0.1); border-color: var(--primary); }
.aix-btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
}
.aix-btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-hover); }
.aix-btn-lg { padding: 0.95rem 2.1rem; font-size: 1rem; border-radius: var(--border-radius); }
.aix-btn-xl { padding: 1.1rem 2.5rem; font-size: 1.125rem; border-radius: var(--border-radius); }

/* ============================================
   CARDS
   ============================================ */
.aix-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--aix-sp-6);
  transition: all .25s ease;
  color: var(--text-primary);
}
.aix-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.aix-card-gradient {
  background: var(--gradient-card);
  border: 1px solid rgba(108,99,255,0.2);
}

/* ============================================
   BADGES
   ============================================ */
.aix-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.75rem; font-weight: 600;
}
.aix-badge-primary { background: rgba(108,99,255,0.2); color: var(--primary-light); border: 1px solid rgba(108,99,255,0.3); }
.aix-badge-success { background: rgba(0,217,181,0.15); color: var(--secondary); border: 1px solid rgba(0,217,181,0.3); }
.aix-badge-danger  { background: rgba(236,72,153,0.15); color: var(--accent); border: 1px solid rgba(236,72,153,0.3); }
.aix-badge-warning { background: rgba(34,211,238,0.15); color: var(--accent-yellow); border: 1px solid rgba(34,211,238,0.3); }

/* ============================================
   GRID
   ============================================ */
.aix-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--aix-sp-6); }
.aix-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--aix-sp-6); }
.aix-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--aix-sp-6); }
.aix-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--aix-sp-6); }
.aix-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--aix-sp-6); }

/* ============================================
   HERO
   ============================================ */
.aix-hero {
  /* hero-bg.png 만 — 색감 오버레이 제거하고 원본 그대로 노출 */
  background:
    url('../images/hero/hero-bg.png') center / cover no-repeat,
    var(--gradient-hero);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--border-color);
}

/* hero — 단일 컬럼 중앙 정렬, 전면 폭 가득 (꽉 찬 느낌) */
.aix-hero-inner {
  display: block !important;
  grid-template-columns: none;
  text-align: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.aix-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* hero-badge / title / desc 중앙 정렬 + 임팩트 키움 */
.aix-hero .aix-hero-badge {
  align-self: center;
  font-size: 0.78rem;
  padding: 8px 18px;
  margin-bottom: 20px;
}
.aix-hero .aix-hero-title {
  max-width: 1100px;
  margin-bottom: 8px;
}
.aix-hero .aix-hero-title .brand {
  letter-spacing: -2.5px;
  font-size: clamp(3.4rem, 7.5vw, 6rem);
}
/* 타이틀 두 번째 줄 — 한 줄로 표시 + 더 크게 */
.aix-hero .aix-hero-title .title-line {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  letter-spacing: -0.5px;
}
.aix-hero .aix-hero-sub {
  max-width: 820px;
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.aix-hero .aix-hero-desc {
  max-width: 820px;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* actions — 중앙 정렬, stats 아래에 위치, 큰 CTA */
.aix-hero .aix-hero-actions {
  justify-content: center;
  margin-top: 44px;
  gap: 16px;
  flex-wrap: wrap;
}
.aix-hero .aix-hero-actions .aix-btn-xl {
  padding: 1.15rem 2.6rem;
  font-size: 1.08rem;
}

/* '무료로 시작하기' CTA — AIXEN 로고와 동일한 3-stop 그라데이션
   (사이트 브랜드 톤 통일: 라이트블루 → 보라 → 청록) */
.aix-hero .aix-cta-start {
  background: linear-gradient(90deg, #4FC3F7 0%, #6C63FF 50%, #00D9B5 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 6px 20px rgba(108,99,255,0.40),
    0 0 0 1px rgba(255,255,255,0.10) inset;
  position: relative;
  overflow: hidden;
  font-weight: 700;
}
.aix-hero .aix-cta-start::before {
  /* hover 시 sweep 효과 */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.aix-hero .aix-cta-start:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(108,99,255,0.55),
    0 0 0 1px rgba(255,255,255,0.18) inset;
  color: #fff !important;
}
.aix-hero .aix-cta-start:hover::before { transform: translateX(100%); }

/* '플랫폼 살펴보기' secondary 도 hero 컨텍스트에서 가독성 향상 */
.aix-hero .aix-hero-actions .aix-btn-secondary {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(108,99,255,0.35) !important;
  color: var(--primary) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.aix-hero .aix-hero-actions .aix-btn-secondary:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px);
}

/* ----- Stats: 미니 대시보드 카드 4종 (꽉 찬 사이즈) ----- */
.aix-hero .aix-hero-stats {
  max-width: 1140px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  border-top: none;
  padding-top: 0;
  margin-top: 40px;
}
.aix-hero .aix-hero-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 22px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(108,99,255,0.18);
  border-radius: 16px;
  text-align: left;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aix-hero .aix-hero-stat::before {
  /* 좌측 컬러 액센트 바 — 톤별로 색상 다름 */
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent-bar, #6C63FF);
}
.aix-hero .aix-hero-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(108,99,255,0.20);
  border-color: rgba(108,99,255,0.4);
}
.aix-hero .stat-ic {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  font-size: 1.35rem;
  color: #fff;
  background: var(--accent-bg, linear-gradient(135deg, #6C63FF, #8B85FF));
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--accent-shadow, rgba(108,99,255,0.32));
}
.aix-hero .stat-body { flex: 1; min-width: 0; }
.aix-hero .stat-body .value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text-primary);
  font-family: 'Inter', var(--aix-font);
  letter-spacing: -1.5px;
}
.aix-hero .stat-body .value .unit {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-left: 2px;
}
.aix-hero .stat-body .label {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
}

/* 톤별 컬러 변수 — 전체 cool 톤 통일 (보라/청록/스카이/시안) */
.aix-hero .aix-hero-stat[data-tone="purple"] {
  --accent-bar: #6C63FF;
  --accent-bg: linear-gradient(135deg, #6C63FF, #8B85FF);
  --accent-shadow: rgba(108,99,255,0.35);
}
.aix-hero .aix-hero-stat[data-tone="teal"] {
  --accent-bar: #00D9B5;
  --accent-bg: linear-gradient(135deg, #00D9B5, #4FC3F7);
  --accent-shadow: rgba(0,217,181,0.35);
}
.aix-hero .aix-hero-stat[data-tone="blue"] {
  --accent-bar: #38BDF8;
  --accent-bg: linear-gradient(135deg, #38BDF8, #6366F1);
  --accent-shadow: rgba(56,189,248,0.35);
}
.aix-hero .aix-hero-stat[data-tone="cyan"] {
  --accent-bar: #22D3EE;
  --accent-bg: linear-gradient(135deg, #22D3EE, #00D9B5);
  --accent-shadow: rgba(34,211,238,0.35);
}

@media (max-width: 900px) {
  .aix-hero .aix-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .aix-hero .aix-hero-title .title-line { white-space: normal; }
}
@media (max-width: 480px) {
  .aix-hero .aix-hero-stats { grid-template-columns: 1fr; }
  .aix-hero .stat-body .value { font-size: 1.5rem; }
  .aix-hero .stat-ic { width: 38px; height: 38px; font-size: 1rem; }
}

/* Feature chips — 가로 4열, 카드 크게 (전면 활용) */
.aix-hero-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 36px auto 40px;
  max-width: 1140px;
  width: 100%;
}
.aix-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(108,99,255,0.25);
  border-radius: 16px;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  transition: all .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
}
.aix-hero-chip:hover {
  background: rgba(255,255,255,0.78);
  border-color: rgba(108,99,255,0.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(108,99,255,0.22);
}
.aix-hero-chip img {
  width: 52px; height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(108,99,255,0.3));
}
.aix-hero-chip .chip-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}
.aix-hero-chip .chip-sub {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
@media (max-width: 1000px) {
  .aix-hero-features { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
}
@media (max-width: 560px) {
  .aix-hero-features { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
  .aix-hero .aix-hero-stat .value { font-size: 1.7rem; }
}

/* ----- Hero 떠있는 sticker 데코레이션 (4종) ----- */
.aix-hero-sticker {
  position: absolute;
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 24px rgba(108,99,255,0.40))
    drop-shadow(0 0 40px rgba(56,189,248,0.18));
  animation: aix-float 6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}
.aix-hero-sticker.tl { top: 11%;  left: 3.5%;  animation-delay: -1s;   width: 100px; height: 100px; }
.aix-hero-sticker.tr { top: 9%;   right: 4%;   animation-delay: -3s;   width: 90px;  height: 90px;  }
.aix-hero-sticker.bl { bottom: 8%; left: 4%;   animation-delay: -2.2s; width: 92px;  height: 92px;  }
.aix-hero-sticker.br { bottom: 12%; right: 5%; animation-delay: -4.5s; width: 100px; height: 100px; }

@media (max-width: 1200px) {
  .aix-hero-sticker { width: 80px !important; height: 80px !important; }
}
@media (max-width: 900px) {
  .aix-hero-sticker.tr, .aix-hero-sticker.br { display: none; }
  .aix-hero-sticker.tl { top: 4%; left: 2%; }
  .aix-hero-sticker.bl { bottom: 4%; left: 2%; }
}
@media (max-width: 600px) {
  .aix-hero-sticker { display: none; }
}
.aix-hero > .aix-container { width: 100%; }
.aix-hero::before {
  content: ''; position: absolute;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(108,99,255,0.15) 0%, transparent 70%);
  top: -200px; right: -200px;
  border-radius: 50%;
  animation: aix-float 8s ease-in-out infinite;
}
.aix-hero::after {
  content: ''; position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,217,181,0.1) 0%, transparent 70%);
  bottom: -150px; left: -100px;
  border-radius: 50%;
}
.aix-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--aix-sp-16); align-items: center;
}
.aix-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(108,99,255,0.15);
  border: 1px solid rgba(108,99,255,0.4);
  border-radius: 50px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: var(--aix-sp-4);
}
.aix-hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  animation: aix-pulse 1.5s ease infinite;
}
.aix-hero-title {
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 900; line-height: 1.18;
  margin: 0 0 var(--aix-sp-4);
  color: var(--text-primary);
}
.aix-hero-title .brand {
  display: block;
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.aix-hero-sub {
  font-size: 1.2rem; font-weight: 600;
  color: var(--secondary);
  margin: 0 0 var(--aix-sp-4);
}
.aix-hero-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 var(--aix-sp-6);
}
.aix-hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.aix-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aix-sp-4);
  margin-top: var(--aix-sp-8);
  padding-top: var(--aix-sp-6);
  border-top: 1px solid var(--border-color);
  max-width: 520px;
}
.aix-hero-stat { text-align: left; }
.aix-hero-stat .value {
  font-size: 1.6rem; font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  font-family: 'Inter', var(--aix-font);
}
.aix-hero-stat .label {
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 6px;
  white-space: nowrap;
}
.aix-btn-xl { padding: 0.95rem 2rem; font-size: 1rem; }

/* Dashboard mockup */
.aix-mock {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5), var(--shadow-glow);
  animation: aix-float 4s ease-in-out infinite;
}
.aix-mock-header {
  background: var(--bg-secondary);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-color);
}
.aix-mock-dot { width: 12px; height: 12px; border-radius: 50%; }
.aix-mock-content { padding: 16px; }
.aix-mock-chart { height: 80px; }
.aix-mock-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px;
}
.aix-mock-box {
  background: var(--bg-secondary);
  border-radius: 10px; padding: 14px;
  border: 1px solid var(--border-color);
}
.aix-mock-box .lab { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.aix-mock-box .val { font-size: 18px; font-weight: 800; }
.aix-mock-chart {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px; height: 100px;
  margin-bottom: 16px;
  display: flex; align-items: flex-end; gap: 8px;
}
.aix-mock-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--gradient-primary); }
.aix-mock-chip {
  background: rgba(108,99,255,0.15);
  border: 1px solid rgba(108,99,255,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.aix-mock-chip-icon {
  width: 32px; height: 32px;
  background: var(--gradient-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

/* Floating badges around dashboard mock */
.aix-mock-float {
  position: absolute;
  z-index: 3;
  background: rgba(20, 22, 48, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(108, 99, 255, 0.35);
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 140px;
  box-shadow:
    0 12px 32px rgba(108, 99, 255, 0.28),
    0 0 48px rgba(108, 99, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: aix-float 5s ease-in-out infinite;
}
.aix-mock-float-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.aix-mock-float-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aix-mock-float-tr {
  top: -22px;
  right: -28px;
  animation-delay: -1s;
}
.aix-mock-float-bl {
  bottom: 64px;
  left: -40px;
  animation-delay: -2.5s;
  padding: 9px 14px;
  min-width: 0;
  border-radius: 12px;
}
.aix-mock-float-bl .aix-mock-float-label {
  font-size: 10px;
  margin-bottom: 2px;
}
.aix-mock-float-bl .aix-mock-float-value {
  font-size: 14px;
  gap: 6px;
}
.aix-mock-float-bl .aix-mock-float-dot {
  width: 6px;
  height: 6px;
}
.aix-mock-float-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00D9B5;
  box-shadow: 0 0 10px #00D9B5, 0 0 20px rgba(0, 217, 181, 0.4);
  animation: aix-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes aix-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}
@media (max-width: 768px) {
  .aix-mock-float-tr { top: -16px; right: -8px; }
  .aix-mock-float-bl { bottom: 40px; left: -8px; }
  .aix-mock-float { padding: 10px 14px; min-width: 120px; }
  .aix-mock-float-value { font-size: 15px; }
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.aix-feature-icon {
  width: 80px; height: 80px;
  border-radius: var(--border-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: var(--aix-sp-4);
  overflow: hidden;
}
/* 이미지 아이콘이 들어갈 때 — 컨테이너 가득 채움 (배경색은 살짝 비치게) */
.aix-feature-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(108,99,255,0.25));
  transition: transform .25s ease;
}
.aix-card:hover .aix-feature-icon img { transform: translateY(-2px) scale(1.04); }

/* 인라인 아이콘 (6가지 메뉴 / 일반 카드용) */
.aix-icon-img {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin-bottom: 1rem;
}
.aix-icon-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(108,99,255,0.2));
  transition: transform .25s ease;
}
a:hover .aix-icon-img img, .aix-card:hover .aix-icon-img img { transform: translateY(-2px) scale(1.05); }
.aix-feature-title {
  font-size: 1.25rem; font-weight: 700;
  margin: 0 0 var(--aix-sp-3);
  color: var(--text-primary);
}
.aix-feature-desc {
  color: var(--text-secondary);
  font-size: 0.9rem; line-height: 1.7;
  margin-bottom: var(--aix-sp-4);
}
.aix-feature-list { list-style: none; padding: 0; margin: 0 0 var(--aix-sp-4); display: flex; flex-direction: column; gap: 8px; }
.aix-feature-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--text-secondary);
}
.aix-feature-list i { color: var(--secondary); font-size: 14px; }

/* ============================================
   PROCESS FLOW
   ============================================ */
.aix-process {
  display: flex; gap: 0;
  padding: var(--aix-sp-4) 0;
  flex-wrap: wrap;
}
.aix-process-step {
  flex: 1; min-width: 180px;
  text-align: center;
  padding: var(--aix-sp-6);
  position: relative;
}
.aix-process-step::after {
  content: '→';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; color: var(--primary);
}
.aix-process-step:last-child::after { display: none; }
.aix-process-icon {
  width: 88px; height: 88px;
  /* 화려한 그라데이션 → 부드러운 파스텔 — step별 톤은 [data-step] 으로 분기 */
  background: #F5F3FF;
  border: 1px solid rgba(108,99,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto var(--aix-sp-4);
  box-shadow: 0 6px 18px rgba(108,99,255,0.10);
  position: relative;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease;
}
.aix-process-step:hover .aix-process-icon { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(108,99,255,0.16); }

/* step별 파스텔 톤 — 매우 옅게 (아이콘 일러스트가 잘 보이도록) */
.aix-process-icon[data-step="1"] { background: #F2EEFF; border-color: rgba(108,99,255,0.22); }
.aix-process-icon[data-step="2"] { background: #E6FAF5; border-color: rgba(0,217,181,0.25); }
.aix-process-icon[data-step="3"] { background: #EAF4FE; border-color: rgba(56,189,248,0.25); }
.aix-process-icon[data-step="4"] { background: #E6FBFD; border-color: rgba(34,211,238,0.30); }
/* 실행 흐름 — step 번호 배지 (라이트 모드 대비 강화) */
.aix-process-num {
  position: absolute; top: -6px; right: -6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  /* 기본 보라→청록 그라데이션 — 흰 글자 + 흰 보더 + 강한 그림자 */
  background: linear-gradient(135deg, #6C63FF, #00D9B5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  z-index: 2;
  border: 2px solid #fff;
  box-shadow:
    0 4px 12px rgba(108,99,255,0.45),
    0 0 0 1px rgba(108,99,255,0.1);
  letter-spacing: -0.5px;
}
/* step별 톤 — process-icon 배경과 매칭 */
.aix-process-num[data-step="1"] { background: linear-gradient(135deg, #6C63FF, #8B85FF); box-shadow: 0 4px 12px rgba(108,99,255,0.50), 0 0 0 1px rgba(108,99,255,0.1); }
.aix-process-num[data-step="2"] { background: linear-gradient(135deg, #00D9B5, #4FC3F7); box-shadow: 0 4px 12px rgba(0,217,181,0.50),   0 0 0 1px rgba(0,217,181,0.1); }
.aix-process-num[data-step="3"] { background: linear-gradient(135deg, #38BDF8, #6366F1); box-shadow: 0 4px 12px rgba(56,189,248,0.50),  0 0 0 1px rgba(56,189,248,0.1); }
.aix-process-num[data-step="4"] { background: linear-gradient(135deg, #22D3EE, #06B6D4); box-shadow: 0 4px 12px rgba(34,211,238,0.55),  0 0 0 1px rgba(34,211,238,0.1); }
/* 이미지 아이콘이 process-icon 안에 들어갈 때 — 원형 컨테이너 가득 */
.aix-process-icon img {
  width: 86%; height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.aix-process-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.aix-process-desc  { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================
   PRICING
   ============================================ */
.aix-pricing {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--aix-sp-8);
  position: relative; overflow: hidden;
  transition: all .25s ease;
  display: flex; flex-direction: column;
}
.aix-pricing > .aix-btn { margin-top: auto; }
.aix-pricing:hover { border-color: var(--primary); box-shadow: var(--shadow-glow); transform: translateY(-6px); }
.aix-pricing.featured {
  background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(0,217,181,0.08));
  border-color: var(--primary);
}
.aix-pricing.featured::before {
  content: '추천';
  position: absolute; top: 20px; right: -28px;
  background: var(--gradient-primary); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 40px;
  transform: rotate(45deg);
}
.aix-pricing-tier {
  font-size: 0.875rem; font-weight: 700;
  color: var(--primary); text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--aix-sp-4);
}
.aix-pricing-amount {
  font-size: 3rem; font-weight: 900;
  line-height: 1; color: var(--text-primary);
  white-space: nowrap;
}
.aix-pricing-grid .aix-pricing-amount { font-size: 1.85rem; }
.aix-pricing-period { font-size: 0.875rem; color: var(--text-muted); margin-left: 4px; }
.aix-pricing-features { margin: var(--aix-sp-6) 0; display: flex; flex-direction: column; gap: var(--aix-sp-3); }
.aix-pricing-features li {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9rem; color: var(--text-secondary);
}
.aix-pricing-features li i.fa-check { color: var(--secondary); }
.aix-pricing-features li i.fa-times { color: var(--text-muted); }
.aix-pricing-features li.disabled { opacity: 0.5; }

/* ============================================
   TESTIMONIAL
   ============================================ */
.aix-testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--aix-sp-8);
}
.aix-testimonial-quote { font-size: 48px; line-height: 1; color: var(--primary); opacity: 0.5; margin-bottom: var(--aix-sp-4); }
.aix-testimonial-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--aix-sp-6); }
.aix-testimonial-author { display: flex; align-items: center; gap: 12px; }
.aix-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aix-stars { color: var(--accent-yellow); margin-left: auto; font-size: 0.9rem; }

/* ============================================
   CTA
   ============================================ */
.aix-cta {
  background: linear-gradient(135deg, rgba(108,99,255,0.2) 0%, rgba(0,217,181,0.1) 100%);
  border: 1px solid rgba(108,99,255,0.3);
  border-radius: var(--border-radius-xl);
  padding: var(--aix-sp-16);
  text-align: center;
  position: relative; overflow: hidden;
}
.aix-cta::before {
  content: ''; position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(108,99,255,0.2) 0%, transparent 70%);
  top: -200px; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.aix-progress {
  width: 100%; height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px; overflow: hidden;
}
.aix-progress-fill { height: 100%; background: var(--gradient-primary); border-radius: 3px; transition: width 0.8s ease; }
.aix-progress-fill.acc-blue { background: var(--gradient-blue); }
.aix-progress-fill.acc-orange { background: linear-gradient(135deg,#38BDF8,#22D3EE); }
.aix-progress-fill.acc-red { background: linear-gradient(135deg,#EC4899,#6C63FF); }

/* ============================================
   EDU — COURSE CARD
   ============================================ */
.aix-course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all .25s ease;
  cursor: pointer;
  color: var(--text-primary);
}
.aix-course-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.aix-course-thumb {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; position: relative;
}
.aix-course-thumb .badge-row {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between;
}
.aix-course-info { padding: var(--aix-sp-4); }
.aix-course-meta {
  display: flex; align-items: center; gap: var(--aix-sp-3);
  margin-bottom: var(--aix-sp-2);
  font-size: 0.75rem; color: var(--text-muted);
}
.aix-course-title {
  font-size: 1rem; font-weight: 700;
  margin: 0 0 var(--aix-sp-2);
  line-height: 1.4; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.aix-course-instructor {
  font-size: 0.75rem; color: var(--text-secondary);
  margin-bottom: var(--aix-sp-3);
  display: flex; align-items: center; gap: 8px;
}
.aix-course-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--aix-sp-3);
  border-top: 1px solid var(--border-color);
  margin-top: var(--aix-sp-3);
}
.aix-course-price { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.aix-course-price .free { color: var(--secondary); }
.aix-rating { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-muted); }
.aix-rating .star { color: var(--accent-yellow); }

.aix-filter-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--aix-sp-4) var(--aix-sp-6);
  display: flex; align-items: center; gap: var(--aix-sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--aix-sp-6);
}
.aix-search-box {
  position: relative;
  flex: 1; min-width: 200px;
}
.aix-search-box input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 40px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-family: var(--aix-font);
  font-size: 0.9rem; outline: none;
}
.aix-search-box input:focus { border-color: var(--primary); }
.aix-search-box i {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.aix-tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(108,99,255,0.1);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.aix-tag:hover, .aix-tag.active {
  background: rgba(108,99,255,0.2);
  border-color: var(--primary);
  color: var(--primary-light);
}

/* ============================================
   AI STUDIO — TOOL CARDS
   ============================================ */
.aix-tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--aix-sp-6);
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
  color: var(--text-primary);
  display: flex; flex-direction: column;
  height: 100%;
}
.aix-tool-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.aix-tool-icon {
  width: 56px; height: 56px;
  border-radius: var(--border-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: var(--aix-sp-4);
}
.aix-tool-icon.t-blue   { background: rgba(79,195,247,0.2); color: #4FC3F7; }
.aix-tool-icon.t-purple { background: rgba(108,99,255,0.2); color: var(--primary-light); }
.aix-tool-icon.t-pink   { background: rgba(236,72,153,0.2); color: var(--accent); }
.aix-tool-icon.t-green  { background: rgba(0,217,181,0.2); color: var(--secondary); }
.aix-tool-icon.t-orange { background: rgba(56,189,248,0.2); color: var(--accent-orange); }
.aix-tool-icon.t-teal   { background: rgba(0,217,181,0.15); color: var(--secondary); }
.aix-tool-icon.t-yellow { background: rgba(34,211,238,0.2); color: var(--accent-yellow); }

.aix-tool-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--aix-sp-2); color: var(--text-primary); }
.aix-tool-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--aix-sp-4);
}
.aix-tool-link {
  font-size: 0.85rem; font-weight: 600;
  color: var(--primary-light);
  display: inline-flex; align-items: center; gap: 6px;
}

/* AI Studio category nav */
.aix-cat-bar {
  display: flex; gap: var(--aix-sp-2);
  flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--aix-sp-8);
}
.aix-cat-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem; font-weight: 500;
  transition: all .2s ease;
  text-decoration: none;
}
.aix-cat-item:hover { color: var(--text-primary); border-color: var(--border-hover); }
.aix-cat-item.active {
  background: rgba(108,99,255,0.2);
  border-color: var(--primary);
  color: var(--primary-light);
  font-weight: 600;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes aix-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes aix-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.aix-reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.aix-reveal.visible { opacity: 1; transform: translateY(0); }
.aix-delay-1 { transition-delay: .1s; }
.aix-delay-2 { transition-delay: .2s; }
.aix-delay-3 { transition-delay: .3s; }
.aix-delay-4 { transition-delay: .4s; }

/* ============================================
   AIXEN HEADER (genspark style) — 전역 적용
   ============================================ */
.aix-header {
	position: sticky;
	top: 0;
	left: 0; right: 0;
	height: 70px;
	background: var(--bg-header) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border-color) !important;
	box-shadow: none !important;
	z-index: 300;
	display: flex;
	align-items: center;
	font-family: var(--aix-font);
	color: var(--text-primary) !important;
}
.aix-header *, .aix-header * a, .aix-header .gnb ul li a {
	color: inherit;
	font-family: inherit;
}
.aix-header-inner {
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	height: 70px;
}

/* ----- LOGO ----- */
.aix-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	flex-shrink: 0;
	height: 100%;
}
.aix-logo-cube {
	width: 44px;
	height: 44px;
	background: url('/img/logo/aixen-icon.svg') center / contain no-repeat;
	border-radius: 0;
	box-shadow: none;
	flex-shrink: 0;
	display: inline-block;
}
.aix-logo-cube::after { content: none; }
.aix-logo-text {
	font-family: 'Inter', var(--aix-font);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1;
	text-transform: lowercase;
	color: var(--text-primary);
	background: none;
	-webkit-text-fill-color: var(--text-primary);
}
.aix-logo-text .t1,
.aix-logo-text .t2 {
	background: none !important;
	-webkit-text-fill-color: var(--text-primary) !important;
	color: var(--text-primary) !important;
}

/* ----- NAV ----- */
.aix-nav {
	height: 100%;
}
.aix-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;  /* 메뉴간 간격 (12 → 24) — active 박스 사이 여유 확보 */
	height: 100%;
}
.aix-nav ul li { padding: 0; position: relative; }
.aix-nav ul li a {
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	border-radius: var(--border-radius-sm);
	/* Pretendard (한글/영문 모두 정갈) → Inter → Noto 순 폴백 */
	font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--text-secondary) !important;
	background: transparent !important;
	border: none !important;
	transition: color .18s ease, background .18s ease;
	white-space: nowrap;
	text-decoration: none !important;
	line-height: 1;
	letter-spacing: -0.025em;
	font-feature-settings: 'ss01', 'tnum';
}
/* hover — 연한 회색 배경 */
.aix-nav ul li a:hover {
	background: rgba(255,255,255,0.06) !important;
	color: var(--text-primary) !important;
}
/* active — 살짝 더 진한 회색 + 굵게 */
.aix-nav ul li a.active {
	background: rgba(255,255,255,0.10) !important;
	color: var(--text-primary) !important;
	font-weight: 700;
}

/* ----- 더보기 드롭다운 (우상단 액션 영역에 위치, 다른 icon-only 버튼들과 통일) ----- */
.has-dropdown { position: relative; }
.aix-hbtn-dropdown { display: inline-flex; }

/* 트리거 active 상태 — 드롭다운 항목 페이지 진입시 / 드롭다운 열린 상태 */
.aix-hbtn.icon-only.aix-nav-more.active,
.has-dropdown.is-open > .aix-hbtn.icon-only.aix-nav-more,
.has-dropdown:hover > .aix-hbtn.icon-only.aix-nav-more {
	background: rgba(108,99,255,0.18) !important;
	border-color: rgba(108,99,255,0.4) !important;
	color: var(--primary-light) !important;
}

.aix-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	transform: translateY(-8px);
	background: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 12px;
	list-style: none;
	margin: 0;
	padding: 6px !important;
	min-width: 200px;
	box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,99,255,0.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 350;
	display: block !important;
	height: auto !important;
	gap: 0 !important;
}
.has-dropdown:hover > .aix-dropdown,
.has-dropdown:focus-within > .aix-dropdown,
.has-dropdown.is-open > .aix-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.aix-dropdown li { width: 100%; }
.aix-dropdown li a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	white-space: nowrap;
	border-radius: 8px !important;
	width: 100%;
	box-sizing: border-box;
}
.aix-dropdown li a i {
	width: 18px;
	text-align: center;
	font-size: .9rem;
	opacity: .75;
	margin: 0 !important;
	transition: opacity .15s ease;
}
.aix-dropdown li a:hover i,
.aix-dropdown li a.active i { opacity: 1; }

/* ----- HEADER ACTIONS ----- */
.aix-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}
.aix-hbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--border-radius-sm);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-secondary) !important;
	background: transparent !important;
	border: 1.5px solid var(--border-color) !important;
	text-decoration: none !important;
	transition: all .2s ease;
	white-space: nowrap;
	cursor: pointer;
}
.aix-hbtn:hover {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
	border-color: var(--border-hover) !important;
}
.aix-hbtn.purple {
	border-color: rgba(108,99,255,0.4) !important;
	color: #a09aff !important;
}
.aix-hbtn.purple:hover {
	background: rgba(108,99,255,0.1) !important;
	color: var(--primary-light) !important;
}
.aix-hbtn.admin-link {
	border-color: rgba(236,72,153,0.4) !important;
	color: #EC4899 !important;
	background: rgba(236,72,153,0.08) !important;
}
.aix-hbtn.admin-link:hover {
	background: rgba(236,72,153,0.18) !important;
	color: #EC4899 !important;
	border-color: rgba(236,72,153,0.6) !important;
}
.aix-hbtn.primary {
	background: var(--gradient-primary) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(108,99,255,0.4);
}
.aix-hbtn.primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(108,99,255,0.55);
	color: #fff !important;
}
.aix-hbtn.ghost-icon {
	padding: 8px 12px;
}
/* 아이콘만 표시 — title 속성으로 툴팁 */
.aix-hbtn.icon-only {
	width: 40px;
	height: 40px;
	padding: 0 !important;
	gap: 0;
	justify-content: center;
	font-size: 1rem;
	border-radius: 10px !important;
}
.aix-hbtn.icon-only i { margin: 0 !important; font-size: 1.05rem; }
/* 헤더 사용자 메뉴 — 마이페이지에서 고른 프로필 아바타 (기본은 fa-user 아이콘 폴백) */
.aix-hbtn.icon-only .aix-user-avatar-img {
	width: 26px; height: 26px; border-radius: 50%;
	object-fit: cover; display: block;
	border: 1.5px solid var(--border-color);
}
.mobile-user-info .aix-user-avatar-img-sm {
	width: 18px; height: 18px; border-radius: 50%;
	object-fit: cover; display: inline-block; vertical-align: -3px; margin-right: 2px;
}

/* ----- 이미지 아이콘 (mask-image 단색 변환) ----- */
/* 단색 PNG 아이콘을 currentColor 로 자동 변환 — 헤더 다크/라이트 모드 자동 대응.
   <span class="aix-ic" style="--ic:url('/images/icons/header/grid.png')"></span> 형태로 사용. */
.aix-ic {
	display: inline-block;
	width: 1.1em; height: 1.1em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--ic, none) no-repeat center / contain;
	mask: var(--ic, none) no-repeat center / contain;
	flex-shrink: 0;
}
.aix-hbtn.icon-only .aix-ic { font-size: 1.2rem; width: 1.2em; height: 1.2em; vertical-align: middle; }
.aix-dropdown li a .aix-ic { font-size: 1rem; margin-right: 4px; }
/* 로그아웃 버튼 — 호버 시 적색 강조 (구분) */
.aix-header-actions a.aix-hbtn.icon-only[href*="actionLogout"]:hover {
	background: rgba(236,72,153,0.15) !important;
	color: #EC4899 !important;
	border-color: rgba(236,72,153,0.4) !important;
}
.aix-plan-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--border-radius-sm);
	font-size: 0.8rem;
	font-weight: 700;
	background: rgba(108,99,255,0.2);
	color: var(--primary-light);
	border: 1px solid rgba(108,99,255,0.4);
}

/* ----- HAMBURGER ----- */
.aix-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
}
.aix-hamburger span {
	width: 24px;
	height: 2px;
	background: var(--text-primary);
	border-radius: 2px;
}

/* ----- 본문이 헤더에 가려지지 않도록 보정 ----- */
body .wrap > .container,
body .wrap > #contents,
body .wrap > .ai-page,
body .wrap > .edu-page { padding-top: 0; }

/* 모바일 메뉴 다크 */
.mobile-menu {
	background: var(--bg-card) !important;
	border-left: 1px solid var(--border-color);
}
.mobile-menu * { color: var(--text-primary); }
.mobile-menu-list a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 16px;
	border-radius: var(--border-radius-sm);
	color: var(--text-secondary) !important;
	transition: all .2s ease;
	text-decoration: none;
}
.mobile-menu-list a:hover {
	background: rgba(108,99,255,0.1);
	color: var(--primary-light) !important;
}
.mobile-menu-overlay { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(4px); }

/* 로그인/로그아웃 등 우측 마지막 버튼 — 화면 우측 끝에 자연스럽게 정렬되도록 강조 */
.aix-hbtn-edge { margin-right: 0; }

/* 로그인/회원가입 — 아이콘 전용에서 한글 라벨 버튼으로 전환.
   옆의 icon-only 버튼(40x40, radius 10)과 높이·라운드를 맞춘다.

   ⚠ 헤더 액션 영역은 class="aix-header-actions aizen-util" 이라
   aizen-common.css 의 `.aizen-util a`(font/padding/border !important)와
   아래쪽 `body.aix-dark .aizen-util a`(color/background !important, 명시도 0-2-2)가
   .aix-hbtn / .aix-hbtn.primary(0-2-0) 를 이겨버린다. 그래서 auth 버튼은
   .aix-header-actions 로 한 단계 감싸 명시도(0-3-0 / 0-4-0)를 올려 지정한다.
   여기서 !important 를 빼면 회원가입 버튼의 그라데이션·흰 글자가 먹지 않는다. */
.aix-header-actions .aix-hbtn.aix-hbtn-auth {
	height: 40px;
	padding: 0 16px !important;
	border-radius: 10px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--text-secondary) !important;
	background: transparent !important;
	border: 1.5px solid var(--border-color) !important;
}
.aix-header-actions .aix-hbtn.aix-hbtn-auth:hover {
	color: var(--text-primary) !important;
	background: var(--bg-card) !important;
	border-color: var(--border-hover) !important;
}
.aix-header-actions .aix-hbtn.aix-hbtn-auth i {
	color: inherit !important;
}
/* 회원가입 = 주 CTA — 브랜드 그라데이션 + 흰 글자 */
.aix-header-actions .aix-hbtn.aix-hbtn-auth.primary {
	background: var(--gradient-primary) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(108,99,255,0.35);
}
.aix-header-actions .aix-hbtn.aix-hbtn-auth.primary i { color: #fff !important; }
.aix-header-actions .aix-hbtn.aix-hbtn-auth.primary:hover {
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(108,99,255,0.5);
}

/* ============================================
   데스크탑에서 모바일 메뉴 마크업이 어떤 상태이든 노출되지 않도록 가드.
   기본 위치/슬라이드 동작은 aizen-common.css 정의(좌측 슬라이드인) 유지.
   여기서는 901px 이상에서만 강제 hidden 처리로
   브레이크포인트 경계에서 nav + mobile-menu 가 동시에 보이는
   "이중 표시" 현상 방지.
   ============================================ */
@media (min-width: 901px) {
	.mobile-menu,
	.mobile-menu-overlay {
		display: none !important;
		visibility: hidden !important;
	}
	.aix-hamburger { display: none !important; }
}

/* ----- 반응형 ----- */
@media (max-width: 1200px) {
	/* 1200px 이하 — nav 폰트/패딩 살짝 축소 + 간격도 줄임 */
	.aix-nav ul { gap: 16px; }
	.aix-nav ul li a { font-size: 1.05rem; padding: 12px 14px; }
}
@media (max-width: 1024px) {
	/* icon-only 버튼(40x40)은 컴팩트하므로 좁은 화면에서도 유지 */
	.aix-header-actions .aix-hbtn:not(.primary):not(.purple):not(.icon-only) { display: none; }
	.aix-plan-badge { display: none; }
	/* nav 가 좁아질 때 메뉴 간 간격을 더 줄여 겹침 방지 */
	.aix-nav ul { gap: 10px; }
	.aix-nav ul li a { font-size: 1.0rem; padding: 12px 12px; }
}
@media (max-width: 900px) {
	.aix-nav { display: none !important; }  /* 햄버거 모드에서 데스크탑 nav 완전 비표시 */
	.aix-hamburger { display: flex !important; }
}
@media (max-width: 600px) {
	/* 좁은 모바일 — 햄버거 메뉴로 충분, 우상단 액션도 숨김 */
	.aix-header-actions .aix-hbtn:not(.primary) { display: none; }
}
/* 로그인/회원가입은 위 반응형 규칙(1024px 이하 텍스트 버튼 숨김)의 예외 —
   비로그인 사용자의 로그인·가입 동선이라 좁아져도 계속 노출한다.
   768px 이하는 .aix-header-actions 자체가 숨고 햄버거 메뉴가 대신하므로
   (aizen-common.css) 이 예외가 실제 의미를 갖는 구간은 769~1024px 이다.
   그래서 600px 이하용 축소 규칙은 두지 않는다 — 적용될 일이 없다. */
@media (max-width: 1024px) {
	.aix-header-actions .aix-hbtn.aix-hbtn-auth { display: inline-flex !important; }
}

/* ============================================
   AIXEN FOOTER (genspark style) — 전역 적용
   ============================================ */
.aix-footer {
	background: var(--bg-secondary) !important;
	border-top: 1px solid var(--border-color) !important;
	padding: 60px 0 30px !important;
	color: var(--text-secondary) !important;
	font-family: var(--aix-font);
	margin-top: auto;
}
.aix-footer * { color: inherit; font-family: inherit; }
.aix-footer-inner {
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
}
.aix-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 48px;
	margin-bottom: 40px;
	align-items: start;
}
.aix-footer-brand .aix-logo { display: inline-flex; }
.aix-footer-desc {
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.7;
	margin: 0;
}
.aix-footer-heading {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-primary) !important;
	margin-bottom: 16px;
}
.aix-footer-links {
	display: flex; flex-direction: column; gap: 10px;
}
.aix-footer-links a {
	color: var(--text-secondary) !important;
	font-size: 0.875rem;
	text-decoration: none !important;
	transition: color .2s ease;
}
.aix-footer-links a:hover { color: var(--primary-light) !important; }
.aix-footer-bottom {
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: var(--text-muted) !important;
	flex-wrap: wrap;
	gap: 8px;
}
@media (max-width: 1024px) {
	.aix-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.aix-footer-grid { grid-template-columns: 1fr; gap: 30px; }
	.aix-footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================
   ADMIN LAYOUT (genspark admin style) — body.aix-admin
   ============================================ */
body.aix-admin {
	background: var(--bg-primary) !important;
	color: var(--text-primary) !important;
	font-family: var(--aix-font);
	margin: 0;
	padding-top: 0 !important;
	min-height: 100vh;
}
body.aix-admin .wrap { padding: 0; margin: 0; min-height: 100vh; }
body.aix-admin > .wrap > .header,
body.aix-admin > .wrap > footer,
body.aix-admin .skip_navi { display: none !important; }

.admin-sidebar {
	width: 240px;
	background: #0A0A18;
	border-right: 1px solid rgba(236,72,153,0.15);
	position: fixed;
	top: 0; left: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 200;
	font-family: var(--aix-font);
}
.admin-logo {
	padding: 16px 18px;
	border-bottom: 1px solid rgba(236,72,153,0.15);
	display: flex; align-items: center;
	gap: 10px; flex-wrap: wrap;
}
.admin-logo-badge {
	background: #EC4899; color: #fff;
	font-size: 10px; font-weight: 700;
	padding: 3px 10px; border-radius: 50px;
}
.admin-nav-section { padding: 18px 10px 6px; }
.admin-nav-title {
	font-size: 9px; font-weight: 700;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: rgba(236,72,153,0.55);
	padding: 0 8px; margin-bottom: 8px;
}
.admin-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	border-radius: var(--border-radius-sm);
	font-size: .85rem; font-weight: 500;
	color: rgba(255,255,255,0.55) !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: all .2s ease;
	border-left: 3px solid transparent;
}
.admin-nav-item i { width: 18px; text-align: center; font-size: 14px; }
.admin-nav-item:hover { background: rgba(236,72,153,0.1); color: rgba(255,255,255,0.9) !important; }
.admin-nav-item.active {
	background: rgba(236,72,153,0.18);
	color: #EC4899 !important;
	font-weight: 700;
	border-left: 3px solid #EC4899;
	padding-left: 9px;
}

.admin-topbar {
	background: rgba(10,10,24,0.95) !important;
	border-bottom: 1px solid rgba(236,72,153,0.15);
	padding: 0 28px;
	height: 60px;
	display: flex; align-items: center; justify-content: space-between;
	position: sticky; top: 0; z-index: 100;
	backdrop-filter: blur(10px);
	margin-left: 240px;
}
.admin-content { margin-left: 240px; padding: 28px; min-height: calc(100vh - 60px); }
/* [2026-08-06] 관리자 페이지 헤더 통일 — 아이콘+제목+기능설명 1줄 */
.admin-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 22px; }
.admin-page-head .aph-copy { min-width:0; }
.admin-page-head h1 { display:flex; align-items:center; gap:10px; font-size:1.4rem; font-weight:800;
	color:var(--text-primary); margin:0 0 5px; line-height:1.25; }
.admin-page-head h1 > i { color:var(--primary-light); font-size:1.15rem; }
.admin-page-head .aph-desc { font-size:.85rem; color:var(--text-muted); margin:0; line-height:1.5; }
.admin-page-head .aph-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }


.admin-stat-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 20px;
	position: relative; overflow: hidden;
}
.admin-stat-card .accent-bar {
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #EC4899, #38BDF8);
}
.admin-stat-icon {
	width: 44px; height: 44px;
	border-radius: var(--border-radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; margin-bottom: 10px;
}
.admin-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.admin-stat-label { font-size: .8rem; color: var(--text-secondary); margin-top: 4px; }

.admin-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	overflow: hidden;
}
.admin-table th {
	padding: 14px;
	text-align: left;
	font-size: .7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-secondary);
}
.admin-table td {
	padding: 14px;
	border-bottom: 1px solid rgba(108,99,255,0.08);
	color: var(--text-secondary);
	font-size: .9rem;
}
.admin-table tr:hover td { background: rgba(236,72,153,0.04); }
.admin-table .ttl { font-weight: 700; color: var(--text-primary); }

@media (max-width: 900px) {
	.admin-sidebar { transform: translateX(-100%); transition: transform .3s ease; }
	.admin-sidebar.open { transform: translateX(0); }
	.admin-topbar, .admin-content { margin-left: 0 !important; }
}

/* ============================================
   eGov 공통 헤더/푸터 다크 테마 오버라이드
   (EgovIncHeader.jsp / EgovIncFooter.jsp 적용)
   ============================================ */
body.aix-dark .header {
  background: var(--bg-header) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
body.aix-dark .header > .inner,
body.aix-dark .header > .inner * { color: var(--text-primary); }

body.aix-dark .header .aizen-logo {
  color: var(--text-primary) !important;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-transform: lowercase;
}
body.aix-dark .header .aizen-logo span:last-child {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--text-primary);
  background-clip: initial;
  color: var(--text-primary);
}
body.aix-dark .header .aizen-logo .logo-icon {
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
  filter: none;
}

body.aix-dark .header .gnb ul li a {
  color: var(--text-secondary) !important;
  font-weight: 500;
  border: none !important;
  background: transparent !important;
  padding: 8px 14px;
  border-radius: var(--border-radius-sm);
  transition: all .2s ease;
}
body.aix-dark .header .gnb ul li a:hover,
body.aix-dark .header .gnb ul li a.active {
  background: rgba(108,99,255,0.15) !important;
  color: var(--primary-light) !important;
}
body.aix-dark .header .gnb ul li a.manager {
  color: var(--accent) !important;
}
body.aix-dark .header .gnb ul li a.manager:hover {
  background: rgba(236,72,153,0.15) !important;
  color: var(--accent) !important;
}
body.aix-dark .header .gnb ul li a i { color: inherit !important; }

body.aix-dark .aizen-util a {
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 6px 14px;
  background: transparent !important;
  transition: all .2s ease;
}
body.aix-dark .aizen-util a:hover {
  background: var(--bg-card) !important;
  color: var(--primary-light) !important;
  border-color: var(--border-hover);
}
body.aix-dark .aizen-util .user-info {
  color: var(--text-primary) !important;
  background: rgba(108,99,255,0.15) !important;
  border: 1px solid rgba(108,99,255,0.3) !important;
  border-radius: var(--border-radius-sm);
  padding: 6px 14px;
}

body.aix-dark .mobile-menu-btn { color: var(--text-primary) !important; }
body.aix-dark .mobile-menu {
  background: var(--bg-card) !important;
  border-left: 1px solid var(--border-color);
}
body.aix-dark .mobile-menu * { color: var(--text-primary) !important; }
body.aix-dark .mobile-menu a:hover { background: rgba(108,99,255,0.1); }
body.aix-dark .mobile-menu-overlay { background: rgba(0,0,0,0.8) !important; }

/* Footer */
body.aix-dark .footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
body.aix-dark .footer * { color: inherit; }
body.aix-dark .footer-section h3 {
  color: var(--text-primary) !important;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
body.aix-dark .footer-section p,
body.aix-dark .footer-section ul li,
body.aix-dark .footer-section a {
  color: var(--text-secondary) !important;
  font-size: 0.875rem;
  line-height: 1.7;
}
body.aix-dark .footer-section a:hover { color: var(--primary-light) !important; }
body.aix-dark .footer-bottom {
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem;
}
body.aix-dark .footer-bottom a {
  color: var(--text-secondary) !important;
}
body.aix-dark .footer-bottom a:hover { color: var(--primary-light) !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .aix-grid-4 { grid-template-columns: repeat(2,1fr); }
  .aix-grid-5 { grid-template-columns: repeat(3,1fr); }
  .aix-hero-inner { grid-template-columns: 1fr; }
  .aix-mock { display: none; }
}
@media (max-width: 768px) {
  .aix-grid-2, .aix-grid-3, .aix-grid-4, .aix-grid-5 { grid-template-columns: 1fr; }
  .aix-hero-stats { flex-wrap: wrap; }
  .aix-process { flex-direction: column; }
  .aix-process-step::after { display: none; }
  .aix-section { padding: 60px 0; }
}

/* ==========================================================================
   글로벌 — Sticky 헤더(70px) 충돌 방지
   ==========================================================================
   - 헤더 높이를 변수로 노출 → 페이지가 calc 로 활용 가능
   - 앵커 스크롤 시 헤더 밑에 가려지지 않도록 scroll-padding-top
   - 콘텐츠 시작이 headers 와 너무 붙는 페이지에 기본 안전 여백 부여
     (이미 본인 padding-top 을 더 크게 가진 hero/section 은 영향 없음 — 본인 값이 우선)
   ========================================================================== */
:root { --aix-header-h: 70px; }
html { scroll-padding-top: calc(var(--aix-header-h) + 12px); }

/* hero 없는 페이지의 첫 번째 .aix-container 에 상단 30px padding 공통 적용
   (예: 공지사항 .aix-container.nt-wrap) */
#contents:not(.has-hero) > .aix-container:first-child {
	padding-top: 30px;
}

/* 어디에든 붙이면 헤더 안전 여백을 강제하는 유틸리티 (신규 페이지 작성 시 즐겨찾기) */
.aix-page-safe-top { padding-top: calc(var(--aix-header-h) + 30px) !important; }
.aix-mt-header     { margin-top: calc(var(--aix-header-h) + 12px) !important; }

/* 회원가입(약관 동의/정보 입력) 컨테이너 — stepper 윗쪽 추가 여백 */
.aix-signup-container { margin-top: 30px; }

/* ============================================================
   .olh-page — Q&A / FAQ 등 정보안내(online help) 사용자 페이지 공통 래퍼
   기존에 각 JSP 의 #contents 에 인라인 style 로 반복 적용되던 값을 공통화.
   ============================================================ */
body.aix-dark .olh-page {
	background: var(--gradient-hero);
	min-height: calc(100vh - 70px);
	padding: 40px 24px 50px;
}

/* ============================================================
   사용자 페이지 — content 영역 공통 레이아웃
   - 짧은 페이지에서 #contents 가 작아 footer 가 콘텐츠 바로 밑에 붙어 보이던 문제 방지.
     viewport 에서 헤더+푸터 고려한 최소 높이 보장.
   - 헤더(상단 메뉴) ↔ 콘텐츠 영역 사이 공통 padding-top 30px.
     ID specificity 로 페이지별 wrapper(.olh-page, .ct-page 등)의 padding-top 보다 우선 적용되어
     모든 사용자 페이지에서 동일한 상단 여백이 보장됨.
   ============================================================ */
body.aix-dark > .wrap > #contents {
	min-height: calc(100vh - 250px);
	padding-bottom: 50px;
}

/* footer 자체는 별도 margin 없이 #contents 바로 다음에 배치 — content 의 padding-bottom 으로 분리 */
body.aix-dark > .wrap > .aix-footer,
body.aix-dark > .wrap > footer.aix-footer { margin-top: 0; }

/* ============================================================
   Pagination — 회원목록(/uss/umt/mber/EgovMberManage.do) 기준 통일
   모든 관리자 목록 페이지에서 .aix-paging + <ui:pagination> 사용.
   ============================================================ */
.aix-paging { text-align: center; padding-top: 8px; margin-top: 20px; }
.aix-paging ul {
	display: inline-flex;
	gap: 4px;
	padding: 0;
	margin: 0;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
}
.aix-paging li { display: inline-block; }
.aix-paging a, .aix-paging strong, .aix-paging span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s ease;
}
.aix-paging a:hover {
	background: var(--bg-card-hover, rgba(108,99,255,0.08));
	border-color: var(--primary);
	color: var(--text-primary);
}
.aix-paging strong {
	background: var(--gradient-primary);
	border-color: transparent;
	color: #fff;
}
.aix-paging-info {
	text-align: center;
	color: var(--text-muted);
	font-size: .85rem;
	margin-top: 18px;
}
.aix-paging-info strong { color: var(--text-primary); font-weight: 700; }

/* ============================================================
   목록 검색/필터 컨트롤 — 관리자 목록 화면 공통 표준 (2026-08-06)
   ------------------------------------------------------------
   그동안 화면마다 .as-filter / .cert-filter / .qx-toolbar / .pm-toolbar /
   .cr-toolbar / .auditx-filter 로 같은 디자인을 조금씩 다르게 재정의해 왔다.
   신규 목록 화면은 아래 클래스를 그대로 쓸 것 — 로컬 <style> 에 다시 만들지 말 것.

     .aix-filter-bar   검색/필터 바 컨테이너 (input·select·button 자동 스타일)
     .aix-select       단독 셀렉트 (필터 바 밖에서 쓸 때)
     .aix-page-size    '건수 보기' 셀렉터 래퍼 (라벨 + select)

   값 기준은 기존 다수 화면(.as-filter/.cert-filter/.qx-toolbar)의 토큰이다.
   높이·폰트가 형제 input/button 과 어긋나면 바로 "디자인 안 맞는다" 로 보이니
   padding·font-size 를 바꿀 때는 이 블록만 고쳐 전 화면을 함께 움직일 것.
   ============================================================ */
.aix-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 16px;
}
.aix-filter-bar .grow { flex: 1; min-width: 200px; }

.aix-filter-bar input,
.aix-filter-bar select,
.aix-page-size select,
.aix-select {
	padding: 8px 12px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	font-family: var(--aix-font);
	font-size: .85rem;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* 셀렉트는 기본 화살표를 없애고 공통 caret 아이콘을 얹는다 (caret 자리만큼 우측 padding 확보)
   [2026-09-26] 30px → 40px. caret SVG 에 background-size 가 없어 박스 높이(≈36px)만큼 그려지고,
   화살표가 오른쪽 끝에서 약 33px 안쪽까지 온다. 30px 로는 가장 긴 옵션 글자가 화살표와 겹쳤다
   (예: 관리자 AI 에셋 관리 '최종+중간 산출물'). 글자 시작 위치는 그대로다. */
.aix-filter-bar select,
.aix-page-size select,
.aix-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A0A0C0'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	cursor: pointer;
}
.aix-filter-bar select,
.aix-select { min-width: 130px; }

/* 펼친 목록(option) — 네이티브 팝업이라 손댈 수 있는 건 배경/글자색뿐이다.
   :root 의 color-scheme:dark 와 함께 써야 스크롤바·하이라이트까지 다크로 나온다. */
.aix-filter-bar select option,
.aix-page-size select option,
.aix-select option {
	background-color: var(--bg-card);
	color: var(--text-primary);
}
.aix-filter-bar select option:checked,
.aix-page-size select option:checked,
.aix-select option:checked {
	background-color: var(--primary);
	color: #fff;
}

/* 마우스를 올렸을 때 '누를 수 있는 컨트롤' 로 읽히게 — 테두리·글자만 primary 톤으로 */
.aix-filter-bar select:hover,
.aix-page-size select:hover,
.aix-select:hover {
	border-color: var(--border-hover);
	background-color: var(--bg-card-hover);
}

.aix-filter-bar input:focus,
.aix-filter-bar select:focus,
.aix-page-size select:focus,
.aix-select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
}

/* '건수 보기' 셀렉터 — 허용값 집합은 EgovAdminController.PAGE_SIZES(10/20/30/50/100)와 반드시 일치 */
.aix-page-size {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8rem;
	color: var(--text-muted);
	white-space: nowrap;
}
.aix-page-size select { min-width: 96px; font-weight: 600; }

/* ============================================================
   Quill 에디터 — URL 편집 tooltip 위치/스타일 전역 보정
   ------------------------------------------------------------
   Quill 2.x 가 선택 위치 중심으로 tooltip left 를 계산하는데,
   짧은 텍스트(예: "test")에 커서가 있거나 짧은 링크인 경우
   left 가 음수가 되어 좌측이 잘려서 입력란이 거의 안 보이는
   디자인 버그가 있음. 모든 Quill 인스턴스에 동일 적용되도록
   여기서 전역 강제 (aix-dark / aix-admin body 양쪽 모두 커버).

   대상 페이지:
   - 강의 등록·수정 (edu/admin/EgovEduAdminEdit.jsp)        [aix-admin]
   - 공지 등록·수정 (notice/admin/EgovNoticeAdminEdit.jsp)  [aix-admin]
   - Q&A 답변 작성 (admin/EgovAdminQnaDetail.jsp)           [aix-admin]
   - Q&A 등록·수정 (uss/olh/qna/EgovQnaCn*.jsp)             [aix-dark]
   ============================================================ */
.ql-snow .ql-tooltip {
	left: 12px !important;             /* Quill 의 음수 left 계산 무력화 — 항상 에디터 좌측 안쪽에 표시 */
	z-index: 50;
	padding: 8px 12px;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.5);
	white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
	color: var(--text-secondary);
	margin-right: 10px;
}
.ql-snow .ql-tooltip input[type=text] {
	min-width: 360px;                  /* 긴 URL 도 잘 보이도록 입력란 너비 확장 (기본 170px) */
	padding: 4px 8px;
	border-radius: 4px;
	font-size: .9rem;
}
.ql-snow .ql-tooltip a,
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
	color: var(--secondary) !important;
	cursor: pointer;
}